No es bueno utilizar variables globales pero ya arregle tu codigo.
prueba con este códgo y analizalo.
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <script type="text/javascript"> cont2=0;a='';b='';
function cambio_color1(){
clearInterval(b);
a = setInterval(cambio_color,100);
}
function regresar_color1(){
clearInterval(a);
b = setInterval(regresar_color,100);
}
function cambio_color(){
var unos = document.getElementById("uno"); //esto es para que vean los valores del contador pero lo pueden borrar
unos.innerHTML = cont2; //esto es para que vean los valores del contador pero lo pueden borrar
cont2+=10;
if(cont2 <= 160){
var cambiar = document.getElementById("div1").style.backgroundPosition="0"+"-"+cont2+"px";
}else{
clearInterval(a); //con esto detengo el movimiento y lo dejo en 160
cont2=160;
}
}
function regresar_color(){
var unos = document.getElementById("uno"); //esto es para que vean los valores del contador pero lo pueden borrar
unos.innerHTML = cont2; //esto es para que vean los valores del contador pero lo pueden borrar
cont2-=10;
if(cont2 >= 0){
var cambiar = document.getElementById("div1").style.backgroundPosition="0"+ "-" +cont2+"px";
}else{
clearInterval(b); //con esto detengo el movimiento y lo dejo en 0
cont2=0;
}
}
class="a" style="width:300px; background-image:url('boton_g.gif'); height:150px; background-repeat: no-repeat;"
onMouseOver="cambio_color1()" onMouseOut="regresar_color1()" > </div>
Saludos
