Foros del Web - Ver Mensaje Individual

KarlanKas · #4 (**permalink**) 31/05/2004, 10:06

He modificado un poco el de las FAQ para que sea más fácil su modificación, se puede modificar con CSS. Para que los botones sean imagenes ponedlos como inputs type image.

Código HTML:

<html> 
<head> 
    <title>Barra de desplazamiento</title> 
	
<style>

#ventana{
z-index:1;
border:solid 1px black;
overflow:hidden;
position:relative;
}

#botonArriba{position:absolute;
padding:0px 0px 0px 0px;
font:normal 8px/8px courier;
top:0px;
z-index:99;
cursor:hand;
}

#botonAbajo{position:absolute;
padding:0px0px0px0px;
font:normal 9px/9px courier;
z-index:99;
cursor:hand;
}

#contenido{
padding:10px 10px 10px 10px;
font:normal 10px/15px verdana;
position:absolute;
top:0px;
left:0px;
background:#ffffcc;
border:solid black 1px;
overflow:hidden;
text-align:justify;
}

#barra{position:absolute;
position:absolute;
z-index:99;
cursor:hand;
}

</style> 


    <script> 
//Muchas gracias a todos los que colaboraron en la elaboración de este script, en especial a JavierB, artífice de la compatibilidad del mismo con NS. 

    ancho=700; 
    altoVentana=300; 
    altoContenido=700; 
    altoBoton=20; 
    anchoBoton=15; 
    incremento=5; 

//    ---------------------------NO EDITAR-------------------------------- 
    recorrido=altoVentana-(2*altoBoton) 
    altoBarra=recorrido*(altoVentana/altoContenido); 
    recorridoBarra=recorrido-altoBarra; 
    incrementoBarra=incremento*(recorridoBarra/(altoContenido-altoVentana)); 
    recorridoAcumuladoBarra=0; 
    recorridoAcumuladoContenido=0; 
    anchoContenido=ancho-anchoBoton; 
    no=false; 
    var yy=0; 
    pulsado=false; 
    var mouseY; 
     
    if (altoVentana>=altoContenido){no=true} 
    altoBarra+=incrementoBarra+1 

</script> 
 
<script for="ventana" event="onmousewheel"> 
    if(document.all){mover(event.wheelDelta/30)} 
    </script> 
 
 <script> 

    function ratonAbajo(){ 
    if (document.all){yy=event.clientY;} 
    else{yy = coorY; } 
    pulsado=true;} 

function inicial(){

document.getElementById("barra").style.top=altoBoton+"px";
document.getElementById("contenido").style.top="0px";
document.getElementById("ventana").style.height=altoVentana+"px";
document.getElementById("ventana").style.width=ancho+"px";
document.getElementById("botonArriba").style.width=anchoBoton+"px";
document.getElementById("botonArriba").style.height=altoBoton+"px";
document.getElementById("botonArriba").style.left=anchoContenido+'px';
document.getElementById("botonAbajo").style.width=anchoBoton+"px";
document.getElementById("botonAbajo").style.height=altoBoton+"px";
document.getElementById("botonAbajo").style.left=anchoContenido+'px';
document.getElementById("botonAbajo").style.top=altoVentana-altoBoton+'px';
document.getElementById("contenido").style.width=anchoContenido+"px";
document.getElementById("barra").style.left=anchoContenido+'px';
document.getElementById("barra").style.height=altoBarra+"px";
document.getElementById("barra").style.top=altoBoton+"px";
if (no){document.getElementById("barra").style.visibility="hidden";} 
document.onmousemove = mouseMove; 
var ns6 = (document.getElementById && !document.all) ? true: false; 
var coorY; 
if (ns6) document.getElementById('barra').addEventListener("mousemove", mouseMove, true) 
function mouseMove(e) 
{ 
if (ns6)    {coorY = e.pageY;} 
return true; 
} 
}
function mover(hacia){ 

    nB=parseInt(document.getElementById("barra").style.top); 
    nC=parseInt(document.getElementById("contenido").style.top); 

if (((nC+(hacia*incremento))<incremento) && (nC+(hacia*incremento)>(altoVentana-altoContenido))){ 
recorridoAcumuladoBarra-=(hacia*incrementoBarra); 
recorridoAcumuladoContenido+=(hacia*incremento); 
     
if(recorridoAcumuladoContenido>0){recorridoAcumuladoContenido=0} 
if(recorridoAcumuladoBarra<altoBoton){recorridoAcumuladoBarra=altoBoton} 
if(recorridoAcumuladoBarra> (recorridoBarra+altoBoton)){recorridoAcumuladoBarr   
a=recorridoBarra+altoBoton} 
     
    document.getElementById("contenido").style.top=recorridoAcumuladoContenido; 
    document.getElementById("barra").style.top=recorridoAcumuladoBarra; 
     
    }} 

     
function ratonMoviendose(){ 
if(pulsado){ 
            if (document.all){y=event.clientY;} 
else{ 
    y = coorY; } 
yy=yy-y; 
yyy=yy/incrementoBarra; 
mover(yyy); 
yy=y; 
}} 
    function seVa(){ 
    pulsado=false; 
     
    } 
    </script> 
</head> 

<body onload="inicial()"> 
<div id="ventana">         
<div id="contenido"> 
En un lugar de la Mancha de cuyo nombre no quiero acordarme no ha mucho tiempo que vivía un aficionado de los de lanza en astillero, adarga antigua, utilitario pequeño y galgo corredor. Frisaba la edad de nuestro aficionado los cincuenta años; era de complexión recia, seco de carnes, enjuto de rostro, gran madrugador y amante del baloncesto. 
<br><br>
Es pues, de saber que este sobredicho aficionado los ratos que estaba ocioso (que eran los más del año) se daba a leer libros de baloncesto con tanta afición y gusto que olvidó casi de todo punto la administración de su hacienda; y llegó a ser tanta la curiosidad y desatino en esto que vendió muchas fanegas de tierra de sembradura para comprar libros de baloncesto en que leer, y así llevó a su casa todos cuantos pudo haber de ellos; y de todos, ninguno le parecía tan bien como el " Saltar y Cambiar " de Díaz Miguel, porque la claridad de su prosa y aquellas intrincadas presiones le parecía de perlas. 
<br><br>
Con estas razones perdía el pobre aficionado el juicio, y desvelábase para entenderlas y desentrañarles el sentido que no se lo sacara ni la entendiera el mismo Wooden. Tuvo muchas veces competencia con el cura de su lugar (que era un hombre docto y con el título regional) sobre el cual había sido mejor entrenador: Palmerín de Mataró o el Caballero Lolo, más maese Nicolás, periodista insigne del mismo pueblo, decía que ninguno llegaba a la altura de Amadís de Reneses, porque tenía muy acomodada condición para todo; que no era entrenador melindroso ni tan llorón como Palmerín de Mataró y que en lo de valentía nadie le iba a la zaga. 
<br><br>
En resolución, el se enfrascó tanto en su lectura, que se le pasaban las noches leyendo de claro en claro y los días de turbio en turbio; y así, de mucho leer y poco dormir se le secó el cerebro de manera que vino a perder el juicio. Que el Cid Ruy Peiró fue campeón de Europa en categoría hembras y que Bernardo de Rovira clasificó a La Salle para la Copa Korac, que se disputaba en honor de un valiente jugador cuyos tiros libres valían cinco puntos. 
<br><br>
En efecto, rematado ya su juicio, vino a dar en el más extraño pensamiento que jamás vio loco en el mundo y fue que le pareció conveniente y necesario, así para el aumento de su honra como para el servicio del baloncesto, hacerse entrenador andante e ir por las pistas del mundo a buscar victorias y a ejercitarse en lo que había leído.
</div> 
<input 
type="button"
value="^"
id="botonArriba"
onMouseOver="pepe22=window.setInterval('mover(1)',20)"
onMouseOut="window.clearInterval(pepe22)">

<input
type="button"
value="v"
id="botonAbajo"
onMouseOver="if(no==false){pepe22=window.setInterval('mover(-1)',20)}"
onMouseOut="if(!no){window.clearInterval(pepe22)}"
>
<input
type="button"
id="barra"
onMouseDown="ratonAbajo()"
onMouseMove="ratonMoviendose()"
onMouseUp="seVa()"
onMouseOut="seVa()">


</div> 
</body> 
</html>

Espero que os sirva!