Kategorien
Webdesign

Bunte Rollbalken als Überraschungseffekt

Trotzdem die bunten Balken nur mit Internet Explorer ab Version 5.5 funktionieren und keinem Standard entsprechen, haben sie sich schnell einen Platz im Werkzeugkasten der Designer erobert. Wer noch eins draufsetzen will, muss in die Javascript Trickkiste…

Trotzdem die bunten Balken nur mit Internet Explorer ab Version 5.5 funktionieren und keinem Standard entsprechen, haben sie sich schnell einen Platz im Werkzeugkasten der Designer erobert.

Wer noch eins draufsetzen will, muss in die Javascript Trickkiste greifen. In unserem Fall sorgt das Skript dafür, das die Balken sich verfärben, wenn der Mauszeiger einen davon berührt. Hier geht’s zur Online Demo im neuen Fenster.

Das Skript wird wie üblich im Dateikopf verborgen. Damit es funktioniert ist ein Aufruf im <body>-Tag notwendig. Er sollte so aussehen:

 <body onMousemove=move()>

Hier das komplette Skript. Die Farben können Sie an den passenden Stellen nach Lust und Laune verändern. Das gilt sowohl für den Ruhezustand als auch den bei Mausberührung.

      <script language="javascript">

function move()
 {
 chk = document.body.clientWidth + 2;
 if(window.event.x
> chk) //Ist Mauszeiger über Scrollbar?
 {
 var sfc = "rgb(185,0,5)";
//scrollbar-face-color
 var ssc = "rgb(185,0,5)"; //scrollbar-shadow-color

var shc = "rgb(255,255,255)"; //scrollbar-highlight-color
 var stc
= "rgb(223,223,223)"; //scrollbar-track-color
 var sac = "rgb(255,255,255)";
//scrollbar-arrow-color
       document.body.style.scrollbarFaceColor
= sfc;
 document.body.style.scrollbarShadowColor = ssc;
 document.body.style.scrollbarTrackColor
= stc;
 document.body.style.scrollbarHighlightColor = shc;
 document.body.style.scrollbarArrowColor
= sac;
 }
 else //wenn Mauszeiger nicht über Scrollbar
 {
 var
sfc = "rgb(192,192,192)"; //scrollbar-face-color
 var ssc = "rgb(128,128,128)";
//scrollbar-shadow-color
 var shc = "rgb(255,255,255)"; //scrollbar-highlight-color

var stc = "rgb(223,223,223)"; //scrollbar-track-color
 var sac =
"rgb(0,0,0)"; //scrollbar-arrow-color
       document.body.style.scrollbarFaceColor
= sfc;
 document.body.style.scrollbarShadowColor = ssc;
 document.body.style.scrollbarTrackColor
= stc;
 document.body.style.scrollbarHighlightColor = shc;
 document.body.style.scrollbarArrowColor
= sac;
 }
 }
 </script>

Die Idee dazu und das Skript lieferte uns Jens Gottfried . Er ist den den Community Mitgliedern auch als Juggler bekannt.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.