Hola todos :
un truco más para no tener que reemplazar totalmente la barra de desplazamiento.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>CAMBIO DE BOTONES SCROLLBAR.</TITLE>
<script>
var ancho1,ancho2,tamano;
var sobre=0;
function medir1(){
document.body.style.overflow="scroll";
ancho1=document.body.clientWidth;
document.body.style.overflow="hidden";
setTimeout("medir2()",100)
}
function medir2(){
ancho2=document.body.clientWidth;
tamano=ancho2-ancho1;
document.getElementById("flecha1").style.height = tamano+"px";
document.getElementById("flecha2").style.height = tamano+"px";
}
function sube(){
if(sobre==1){
posicion=document.getElementById("contenedor");
posicion.scrollTop = posicion.scrollTop-10;
setTimeout("sube()",50);
}}
function baja(){
if(sobre==1){
posicion=document.getElementById("contenedor");
posicion.scrollTop = posicion.scrollTop+10;
setTimeout("baja()",50);
}}
</script>
<style>
body{margin:0; width:100%; height:100%; }
html{margin:0; width:100%; height:100%; overflow:hidden; }
#contenedor{height:100%; overflow:auto; background:#cfc; }
#contenido{padding:15px 10px; }
#flecha1{position:absolute; top:0; right:1px; z-index:100; background-color:buttonface; }
#flecha2{position:absolute; bottom:0; right:1px; z-index:100; background-color:buttonface; }
h1{line-height:200%; }
</style>
</HEAD>
<BODY onload=medir1()>
<div id="contenedor">
<div id="contenido">
<h2> Reemplaza botones en barra de desplazamieno con imágenes. (IE , FF)</h2>
<h1>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29
</div>
</div>
<img src="http://www.forosdelweb.com/images/smilies/dedosarriba.gif " id="flecha1" onmouseover="sube()" onmouseout="sobre=0" onmouseup="sobre=0" onmousedown="sobre=1;sube()">
<img src="http://www.forosdelweb.com/images/smilies/dedosabajo.gif" id="flecha2" onmouseover="baja()" onmouseout="sobre=0" onmouseup="sobre=0" onmousedown="sobre=1;baja()">
</BODY>
</HTML>
Está hecho para
IE y FF, no porque crea que es imposible adaptarlo a otros navegadores; sino porque yo no sé hacerlo.
saludos
furoya