Mit diesem kleinen JavaScript kann man einen kleinen Effekt nur für den Internet Explorer erreichen. Hierbei ändert sich die Farbe der Scollbar bei Mausberührung.

Selbst designte Scollbars sind schon etwas tolles. Mit einem kleinen JavaScript kann man diesen Effekt noch ein wenig "aufmöbeln". Hierbei ändert sich die Farbe des Scollbalken bei einer Mausberührung.

Hier gehts zu Demo...

<script language="javascript" type="text/javascript">
<!--
function scrollfun()
{
chk = document.body.clientWidth + 2;
if(window.event.x > chk)
{
var sfc = "blue"; //scrollbar-face-color
var ssc = "red"; //scrollbar-shadow-color
var shc = "green"; //scrollbar-highlight-color
var stc = "yellow"; //scrollbar-track-color
var sac = "black"; //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
{
var sfc = "orange"; //scrollbar-face-color
var ssc = "red"; //scrollbar-shadow-color
var shc = "white"; //scrollbar-highlight-color
var stc = "silver"; //scrollbar-track-color
var sac = "blue"; //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>

Das Skript spricht über das "document" Objekt die Style-Eigenschaft des Body-Tags an, und darüber die einzelnen Farben für die Elemente der Scrollbar.
Wo die Farben definiert werden, ist anhand der Kommentare leicht zu erkennen.
Das Skript muss explizit über den <body> Tag aufgerufen werden.

<body onMousemove="scrollfun()">

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: