antes que nada saludos a todos y a mi buen amigo Franz1628
mira lo que estoy haciendo con el código que me ayudaste a mejorar
aunque tiene unas fallas muy chicas es cuestión de mejorar
les pido ayuda a los web master ya que esta función esta muy padre y ya casi esta terminada
pueden checarla en este link solo tiene un error que es que se encuentran las funciones y no se como cancelas las funciones cuando este otra.
http://cursosdematematicas.com/boton4.php
vean como funcionas
Código Javascript
:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>contador</title>
<script type="text/javascript">
cont2=0;a='';b='';
function cambio_color1(me){
clearInterval(b);
a = setInterval( function(){cambio_color(me) },100 );
}
function regresar_color1(me){
clearInterval(a);
b = setInterval( function(){regresar_color(me) },100 );
}
function cambio_color(me){
var unos = document.getElementById("uno"); //esto es para que vean los valores del contador pero lo pueden borrar
unos.innerHTML = cont2;
var n=me; //esto es para que vean los valores del contador pero lo pueden borrar
cont2+=4;
if(cont2 <= 20){
var cambiar = document.getElementById(n).style.backgroundPosition="0"+"-"+cont2+"px";
}else{
clearInterval(a); //con esto detengo el movimiento y lo dejo en 160
cont2=20;
}
}
function regresar_color(me){
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
var n1=me;
cont2-=1;
if(cont2 >= 0){
var cambiar = document.getElementById(n1).style.backgroundPosition="0"+ "-" +cont2+"px";
}else{
clearInterval(b); //con esto detengo el movimiento y lo dejo en 0
cont2=0;
}
}
</script>
<style type="text/css">
<!--
body {
background-color: #996633;
}
.menu {
background-color: #FF33CC;
position: relative;
overflow:hidden;
}
.menu ul li{
list-style-type: none;
float: left;
width: 100px;
margin-right: 5px;
height: 20px;
text-align: center;
color: #FF0000;
background-image: url(jjjj.gif);
}
-->
</style>
</head>
<body >
<div id="uno"></div>
<div class="menu">
<ul >
<li id="me" onMouseOver="cambio_color1('me')" onMouseOut="regresar_color1('me')">home</li>
<li id="me2" onMouseOver="cambio_color1('me2')" onMouseOut="regresar_color1('me2')">ventas</li>
<li id="me3"onMouseOver="cambio_color1('me3')" onMouseOut="regresar_color1('me3')">diseño</li>
<li id="me4" onMouseOver="cambio_color1('me4')" onMouseOut="regresar_color1('me4')">artes</li>
<li id="me5" onMouseOver="cambio_color1('me5')" onMouseOut="regresar_color1('me5')">comedia</li>
</ul>
</div>
</body>
</html>