[SOLUCIONADO] Boton animado

reciervide · #1 (**permalink**) 19/03/2013, 09:03

Hice un botón q tiene una imagen y cuando me paro sobre el, la imagen cambia. Llamo al evento onmouseover y ahi llamo a la funcion q cambia la imagen, me funciona perfecto, pero lo que quiero es en el evento pasarle por parámetro el id de la capa donde esta la imagen, para entonces en la funcion capturar ese id y cambiar la imagen de la capa con ese id (y esto es lo que no se), porque yo lo hice sin pasarle parametro y en la funcion obtengo la capa de la imagen por el getElementById, pero si quiero hacer mas botones entonces tengo que repetir la funcion y lo que quiero es una sola funcion que le paso por parametro el id de la capa a la que le voy a cambiar la imagen. Aqui les va el codigo:

////Javascript

<script type="text/javascript">
function cambio1() {
document.getElementById("imagen").style.background Image='url("2.png")';
}
function cambio2(id) {
document.getElementById("imagen").style.background Image='url("1.png")';
}
</script>

//////HTML

<div id="boton">
<div id="imagen"></div>
<div id="texto"><a href="" onmouseover="cambio1()" onmouseout="cambio2()">Registrar Rol</a></div>
</div>

IsaBelM · #2 (**permalink**) 19/03/2013, 15:23

prueba con el método previousElementSibling

HackID1 · #3 (**permalink**) 19/03/2013, 17:10

Buenas, tu quieres que con 2 funciones solamente, te permita cambiar una imagen por otra aunque hayan 10 imágenes, no? te puedo dar una pista porque ahora mismo no caigo bien en como hacerlo, pero aqui te dejo algo que seguro te sirva si lo planteas bien.

Código Javascript:

Ver original<script>
    /* Con esto posicionamos las imagenes en esos valores
        aproximadamente el centro de la página y en grande.
    */
        function subir(x)
        {
        var imagenes='imagen'+ x
        document.getElementById(imagenes).style.top='20%';
        }
        
        function vuelve(x)
        {
        var imagenes='imagen'+ x
        document.getElementById(imagenes).style.top='85%';
        }
        
    </script>

Código HTML:

Ver original<body>
    <h3 align="center">Posicionate sobre la imagen </h3>
    <!--Imagenes que suben-->
    <img id="imagen1" src="barca.jpg" onmouseOver="subir(1)" onmouseOut="vuelve(1)"/>
    <img id="imagen2" src="real.png" onmouseOver="subir(2)" />
    <img id="imagen3" src="nal.jpg" onmouseOver="subir(3)" />
    <img id="imagen4" src="amadrid.png" onmouseOver="subir(4)" />
    <img id="imagen5" src="chelsea.jpg" onmouseOver="subir(5)" />
    
</body>

Esto es un ejemplo pero no hace lo de cambiar el background como lo veras, pero es una idea de como hacer una función para cuando estes encima (onMouseOver) y otra para cuando salgas (onmouseOut).

Aquí lo importante es

function subir(x)
{
var imagenes='imagen'+ x
.......
........
}

Como ves a la funcion le doy como parametro una variable ( llamada x )
Luego abajo digo que. Var imagenes = 'imagen' + x
Con lo que imagen es el Id de cada una + la x que es un número asignado a cada imagen.
el 1 para la 1 imagen, el 2 la segunda etc...

Abajo en el BODY ves :

Código HTML:

Ver originalonmouseOver="subir(1)" onmouseOut="vuelve(1)"

Aqui le paso a la function subir entre parentesis la imagen 1.
Y luego a la funcion vuelve el 1, y asi con el resto.. espero te ayude esto.

-------------------------------------

Te dejo un ejemplo aparte, aunque no es lo que quieres de como cambiar imagenes.

Código Javascript:

Ver original<HTML>
<HEAD>
  <TITLE>Cambia imagen cuando pasa el ratón</TITLE> 
  <SCRIPT LANGUAGE="JavaScript">
                function activar(Img) {
                        document.getElementsByName("messi2")[0].setAttribute("src", "messi.jpeg");
                }
                
                function desactivar() {
                        document.getElementsByName("messi2")[0].setAttribute("src", "messi2.jpeg");
                }
  </SCRIPT>
  
  <style>
  #titulo {
  position: relative;
  text-align: center;
  }
  
  </style>
  
</HEAD>
 
        <BODY>
                <h1 id="titulo"> En la imagen para que cambie</h1>
                <A HREF="cambia.html" onMouseOver="activar();" onMouseOut="desactivar();">
                    <IMG NAME="messi2" SRC="messi2.jpeg" BORDER=0>
                </A>
        </BODY>
</HTML>

reciervide · #4 (**permalink**) 19/03/2013, 19:35

ya me funciono perfecto con pasarle por parametro el numero de la imagen, thank you
Saludos

emprear · #5 (**permalink**) 19/03/2013, 19:50

Según lo veo te está complicando, hacé un sprite de 2 imágenes por botón y utilizá el pseudoatributo hover de css

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Efecto hover css</title>
<style type="text/css">
/*<![CDATA[*/
 
a#uno{
width: 100px;
height: 25px;
background-position: center top;
background-image: url('boton_uno.jpg');
border: none;
display:block;
}
a#uno:hover{
background-position: center -25px;
}
 
a#dos{
width: 100px;
height: 25px;
background-position: center top;
background-image: url('boton_dos.jpg');
border: none;
display:block;
}
 
a#dos:hover{
background-position: center -25px;
}
 
a{
margin: 3px;
}
/*]]>*/
</style>
</head>
<body>
<a href="uno.html" id="uno"><!-- fix --></a>
<a href="dos.html"  id="dos"><!-- fix --></a>
</body>
</html>

Demo
http://foros.emprear.com/css/over_in...lover-css.html

Saludos