- einfacher Einbau
- konfigurierbar
- keine serverseitigen Voraussetzungen
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.
Bildnachweis: © Rommelsbacher / PIXELIO