Cambiar imagenes con hover

chi_flao · #1 (**permalink**) 16/12/2010, 05:31

Hola a todos, tengo una función que me cambia la imagen al pasar por encima, sustituyendola por otra de la siguiente manera:

Código PHP:

      $(".event-button").hover(function() {

        pos=$(this).attr("src").lastIndexOf("-");            

        valor=$(this).attr("src").substr(pos+1,3);

        imgName=$(this).attr("src").replace(valor,"hov");

        $(this).attr("src",imgName);

    },function() {

        pos=$(this).attr("src").lastIndexOf("-");            

        valor=$(this).attr("src").substr(pos+1,3);

        imgName=$(this).attr("src").replace(valor,"out");

        $(this).attr("src",imgName);

    });

Código PHP:

  <img class="event-button" src="imagen-out.png" alt="" /></a>

Hasta ahí todo correcto, pero si dentro de la imagen introduzco un texto dentro de un SPAN:

Código PHP:

  <img class="event-button" src="imagen-out.png" alt="" /><span>texto</span</a>

Lo que sucede entonces que aunque estés dentro de la imagen, al pasar por encima del SPAN, la imagen vuelve a cambiar activandose la de OUT y lo que quiero es que se mantenga la imagen del HOVER.

No manejo todavía muy bien el jquery, y quería saber si hay alguna manera de que el hover afecte también a todas las etiquetas hijas de la que se ha indicado.

Un saludo.

Dany_s · #2 (**permalink**) 16/12/2010, 07:57

mete todo en un contenedor y dale el evento a ese elemento asi buscas la imagen y le cambiasel atributo

algo asi

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
        <script type="text/javascript">
            $( function (){
                a = 'http://www.todoroms.com/img/fichas/cached/2010/10/40/713908-50x100.jpg';
                b = 'http://php-freelancer.in/wp-content/uploads/2010/04/jquery.gif';
 
                $('.event-button').hover( function(){
                    $(this).find('img').attr('src', b);
                }, function (){
                    $(this).find('img').attr('src', a);
                });
 
            });
        </script>
    <body>
 
        <div class="event-button">
            <img src="http://www.todoroms.com/img/fichas/cached/2010/10/40/713908-50x100.jpg" />
            <span>texto</span>
        </div>
 
    </body>
</html>

chi_flao · #3 (**permalink**) 16/12/2010, 08:40

Gracias Dany, lo que me gusta complicarme la vida y lo facil que puede llegar a ser todo. Me has sido de gran ayuda.

Un saludo.