Hola a todos, estoy aprendiendo Javascript y después de leer un par de libros actuales de JS, más ojear las diferentes webs de ejemplos me he puesto manos a la obra para empezar a probar cosas, el siguiente script tiene la intención de hacer crecer y decrecer una barra en horizontal para menús en vertical, se que estará hecho en muchos sitios, pero el caso es que hago esto para resolver curiosidades como la siguiente.
El script falla cuando paso demasiado rápido el ratón por encima, el efecto que da cuando hago eso es que la barra se queda congelada y tiende a querer hacer las dos funciones a la vez a pesar de no estar el ratón encima, tiene un onmouseover y un onmouseout para las dos opciones de crecimiento y decrecimiento.
Estoy buscando algún diferenciador para que no haga las dos opciones al mismo tiempo, sobre esta linea he encontrado que se puede usar onmouseover y onmouseout en el script directamente, pero no entiendo mucho su modo de empleo, he buscado todo el día de ayer por google, pero la información que aparece es compleja o esta poco documentada por lo que me generan demasiadas dudas de "por que" o confusión.
Código:
<html>
<head>
<script type="text/javascript">
function tamano(){
// Crea la variable tamano y los punteros de las funciones
var tamano = 100;
this.avance = fnAvance;
this.desavance = fnDesavance;
// fnAvance amplia la barra hasta 200 px
function fnAvance(){
if (tamano < 200){
var recarga = setTimeout('miTamano.avance()', 0);
tamano = tamano + 2;
if (tamano > 200){
tamano = 200;
}
document.getElementById('boton').style.width = tamano;
document.getElementById('boton').innerHTML = tamano;
}
}
// fnAvance decrece la barra hasta 100 px
function fnDesavance(){
if (tamano > 100){
setTimeout('miTamano.desavance()', 0);
tamano = tamano - 2;
if (tamano < 100){
tamano = 100;
}
document.getElementById('boton').style.width = tamano;
document.getElementById('boton').innerHTML = tamano;
}
}
}
var miTamano = new tamano();
</script>
</head>
<body>
<div id="boton" onmouseover="miTamano.avance();" onmouseout="miTamano.desavance();" style="border-style: solid; width: 100px; height: 20px; border-width:1px;"></div>
</body>
</html>
Bueno, ojala que alguien me pueda ayudar un poco con esto, al menos alguna referencia por la que seguir investigando.
Un saludo. ^^