Yo también quiero saber!!. Todos ya conocemos los trucos para personalizar una
scrollbar en
Internet Explorer (también en
Mozilla, pero no desde una página web), y me interesa mirar algún código generado por ese editor para saber cómo lo hace.
Hay algún viejo tema donde se explican varios de los trucos para
IE 5.5+ que ya estamos acostumbrados a ver, pero habría que actualizarlos.
Propiedades del scroll
Los de cambiar el color (no en
Firefox) o ponerle imágenes propias en lugar de los botones de dirección (los que tienen las flechas de 'arriba' y 'abajo') todavía andan; los de cambiar el tamaño o mostrar una imagen de fondo en la pista o el botón deslizable (sólo
IExplorer) hay que escribirlos de nuevo.
Aprovecho el tema para postear el que pediste,
fabiandiaz Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>TRACKBAR CON IMAGEN.</title>
<script type="text/javascript">
var colorInicio = null;
function colorFondo(){
if (colorInicio == null) var colorElegido = dlgHelper.ChooseColorDlg();
else var colorElegido = dlgHelper.ChooseColorDlg(colorInicio);
colorElegido = colorElegido.toString(16);
if (colorElegido.length < 6) {
var relleno = "000000".substring(0,6-colorElegido.length);
colorElegido = relleno.concat(colorElegido);
}
document.getElementsByTagName("html")[0].style.backgroundColor =
document.getElementById("muestra").style.backgroundColor =
colorElegido;
colorInicio = colorElegido;
}
</script>
<style type="text/css">
html {background-color:#808080; overflow:hidden; height:100%;
background-image:url("http://img43.imageshack.us/img43/7566/semitransmarmol5ba.gif");}
body {background-color:#000000; color:#ffffff; overflow:auto;
height:100%; margin:0; scrollbar-track-color:#abcdef;
filter:chroma(color="#abcdef");}
h2 {margin:15px 10px; }
p {font-size:50pt; text-align:center;}
#muestra {height: 127px; width: 127px; background-color: #808080;
color: #ffffff; font-family: cursive, decorative, fantasy;
margin: 15px; }
</style>
</head>
<body>
<h2>Pone imagen de fondo en pista de barra de desplazamiento. <br>
(Para IExplorer)</h2>
<p><input type=button onclick="colorFondo()" value="COLOR FONDO"><br>
<img src="http://img43.imageshack.us/img43/7566/semitransmarmol5ba.gif
" id="muestra" alt="MUESTRA" ><br>
| <br>| <br>| <br>| <br>| <br>| <br>| <br>| <br>| <br>| <br>
| <br>| <br>| <br>| <br>| <br>| <br>| <br>| <br>| <br>| <br>| <br>
</p>
<object id=dlgHelper height=0px width=0px
classid=clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b></object>
</body>
</html> Como la imagen imita un mármol de color gris y algunas parsonas tienen configuradas sus barras en ese color, puse una con semitransparencia y un editor de colores, para que viren el de fondo a gusto.
Y dejo algunos enlaces relacionados
Aplicar CSS la barra de scroll Aspecto de la barra de scroll Barras con transparencia??? cambiar el scrollbar slidebar / trackbar en html Imagen. 