Beispiel

Arbeitsweise

Das Barometer besteht aus zwei Ebenen ... einem Hintergrundbild sowie einem Füllmuster. Das Hintergrundbild beinhaltet alle grafischen Elemente incl. der Skala. Das Füllmuster ist ein Bild in der gleichen Größe wie der Hintergrund. Im Beispiel wurde ein transparentes gif verwendet, das lediglich den grünen Balken enthält.

Die Darstellung des Balkens erfolgt per Javascript, welches über einen Konfigurationsbereich angepasst werden kann. Aus dem Maximalwert, dem aktuellen Wert/Betrag wird die relative Höhe des Balkens errechnet.

Außer als Spendenbarometer ist das Script prinzipiell natürlich auch für alle anderen Einsatzzwecke geeignet, bei denen ein Fortschritt dargestellt werden soll; wie z.B. Highscores, Mitgliederzahlen, Verkaufszahlen, Umsatzzahlen, Statistiken, Besucherzahlen, etc., etc.

Einbau

Der Einbau ist in vier Schritten erledigt ... abgesehen von der Erstellung passender Grafiken natürlich ;-). CSS-File, Javascript-Datei sowie Hintergrund- und Vordergrundbild müssen auf den Webserver kopiert werden. Die Pfade sind ggf. anzupassen.

1) CSS-Code einbinden (zwischen die Head-Tags kopieren)

<link rel="stylesheet" type="text/css" href="barometer.css" />

barometer.css (0,4 KB)

» Einbau in NetObjects Fusion 11

Layout-Eigenschaften / HTML...

2) Javascript zwischen die Head-Tags kopieren oder als Script einbinden

<script type="text/javascript" src="barometer.js"></script>

In dem Script müssen dann die erforderlichen Einstellungen vorgenommen werden.

barometer.js (1,9 KB)

» Einbau in NetObjects Fusion 11

Layouteigenschaften / HTML...

3) Barometer platzieren

<div id="barometerBox" >
<img src="images/spendenbarometer_fill.gif" alt="" />
</div>

Das Bild mit dem Füllmuster muss lediglich in einem div-Container mit der ID "barometerBox" platziert werden.

» Einbau in NetObjects Fusion 11

Bild-Eigenschaften / HTML...

4) Barometer aufrufen

Der Aufruf des Javascripts erfolgt idealerweise nach dem Laden der Seite durch das Einfügen von onload im body-Tag:

<body onload="sb_Timer=setInterval('Barometer()', 1);" >

» Einbau in NetObjects Fusion 11

Layout-Eigenschaften / HTML...

Copyright

Das Script kann kostenlos auf nicht kommerziellen Seiten verwendet werden, soweit der Hinweis auf das Copyright im Script erhalten bleibt. Alle Rechte bleiben beim Urheber. Die kommerzielle Verwendung sowie die Verwendung auf kommerziellen (Web-)Seiten ist nicht gestattet. Im Zweifel sowie bei Interesse einfach nachfragen ( Kontakt ).

Die Verwendung des Scripts erfolgt ausdrücklcih auf eigenes Risiko. Eine Haftung oder Gewährleistung, gleich aus welchem Grund, ist ausgeschlossen. Durch die Verwendung des Scripts entsteht weder ein Vertragsverhältnis noch ein Anspruch auf Support.

 

© 2008 orangepointsolutions Ltd.

Impressum

 

Bildnachweis: © Rommelsbacher / PIXELIO