Bueno espero que me puedan ayudar...
Estaba armando un código, busqué en distintas páginas y al final intenté armar mi propio scrolling.
Lo que yo queria era hacer scroll en el DIV al pasar el mouse en una pequeña imagen.
Pero al pasar el raton el scroll sube y baja y no se detiene... este es mi código:
(en este ejemplo uso dos enlaces en lugar de imágenes)
Cita: <html>
<head><title></title>
<script language='javascript'>
function move_up() {
x = scroll_clipper.scrollTop;
scroll_clipper.scrollTop = x - 20;
}
function move_down() {
x = scroll_clipper.scrollTop;
scroll_clipper.scrollTop = x + 20;
}
function mover(y) {
switch(y) {
case 1:
var intup = setInterval("move_up()",500);
break;
case 2:
var intdw = setInterval("move_down()",500);
break;
default:
document.write("No variable found");
}
}
function detener(z) {
switch(z) {
case 1:
scroll_clipper.clearInterval(intup);
break;
case 2:
scroll_clipper.clearInterval(intdw);
break;
default:
document.write("No variable found");
}
}
</script>
</head>
<body>
<a href='#' onMouseOver="javascript
:mover(1);" onMouseOut="javascript
:detener(1);">Move UP</a><br>
<a href='#' onMouseOver="javascript
:mover(2);" onMouseOut="javascript
:detener(2);">Move Down</a>
<p><div id="scroll_clipper" style="position:absolute; width:150px; height: 150px; overflow:hidden;">
<div id="scroll_text" style="background-color:yellow;">
<p>Linea 1</p>
<p>Linea 2</p>
<p>Linea 3</p>
<p>Linea 4</p>
<p>Linea 5</p>
<p>Linea 6</p>
<p>Linea 7</p>
<p>Linea 8</p>
<p>Linea 9</p>
<p>Linea 10</p>
</div>
</div>
</body>
</html>
Lo que se supuse que deberia de hacer este código es al pasar el ratón por el enlace respectivo deberia subir o bajar como si fuera una scrollbar, y al sacar el ratón debería dejar de moverse.
Pero lo que pasa en realidad es que se mueve hasta ya no poder más y si se pasa el ratón por ambos enlaces pues el scroll hace uno arriba y uno abajo y nunca se detiene.
¿Qué es lo que esta mal?
Gracias