Com este script é muito simples criar um efeito do tipo "OnMouseOver" porém na Barra de Rolagem (ScrollBar) do Internet Explorer.
O código é muito prático para customizar, porém só funcionará no IE 5.5 ou superior.
Veja as cores AQUI
O código é muito prático para customizar, porém só funcionará no IE 5.5 ou superior.
Veja as cores AQUI
- Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Scroll Bar</title>
</head>
<body>
<script language=javascript>
/*---------------[IE 5.5 Scrollbars colorer]--------------------*/
function scrollBar(line,face,theme){
if (!line||!face){
line=null;
face=null;
switch(theme){ // Predefined themes
case "blue":
var line="#000000";
var face="#EBF5FF";
break;
case "orange":
var line="#78AAFF";
var face="#EBF5FF";
break;
case "red":
var line="#FF7979";
var face="#FFE3DD";
break;
case "green":
var line="#00C600";
var face="#D1EED0";
break;
case "neo":
var line="#000000";
var face="#DEDFE2";
break;
}
}
with(document.body.style){
scrollbarDarkShadowColor=line;
scrollbar3dLightColor=line;
scrollbarArrowColor="black";
scrollbarBaseColor=face;
scrollbarFaceColor=face;
scrollbarHighlightColor=face;
scrollbarShadowColor=face;
scrollbarTrackColor="#999999";
}
}
/*------------------[Pointer coordinates catcher]---------------*/
function colorBar(){
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var x = event.clientX;
var y = event.clientY;
if(x>w) scrollBar('#000000','#B4B3B3'); // Your colors
else scrollBar(null,null,"neo"); // A predefined theme
}
if (document.all){
scrollBar(null,null,"neo");
document.onmousemove=colorBar;
}
//-->
</script>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>