Cambiar la fuente de la imagen en el rollover usando jQuery

Tengo unas cuantas imágenes y sus imágenes rollover. Usando jQuery, quiero mostrar/ocultar la imagen rollover cuando ocurra el evento onmousemove/onmouseout. Todos los nombres de mis imágenes siguen el mismo patrón, así:

Imagen original: Imagen.gif

Imagen de Rollover: Imageover.gif

Quiero insertar y eliminar la porción *"over"de la fuente de la imagen en el evento onmouseover y onmouseout, respectivamente.

¿Cómo puedo hacerlo usando jQuery?

lowtechsun
Pregunta editada 18º abril 2016 в 10:12
Programación
html jquery
12º febrero 2009 в 7:28
6 vistas
Solución

Para ponerlo a punto:

$(function() {
    $("img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("over.gif", ".gif");
            $(this).attr("src", src);
        });
});

Para los que utilizan fuentes de imagen url:

$(function() {
        $("img")
            .mouseover(function() {
               var src = $(this).attr("src");
               var regex = /_normal.svg/gi;
               src = this.src.replace(regex,'_rollover.svg');
               $(this).attr("src", src);

            })
            .mouseout(function() {
               var src = $(this).attr("src");
               var regex = /_rollover.svg/gi;
               src = this.src.replace(regex,'_normal.svg');
               $(this).attr("src", src);

            });
    });
jemmamariex3
Respuesta editada 4º enero 2019 в 4:41
Comentarios (10)

Sé que estás preguntando por el uso de jQuery, pero puedes lograr el mismo efecto en los navegadores que tienen JavaScript desactivado usando CSS:

#element {
    width: 100px; /* width of image */
    height: 200px; /* height of image */
    background-image: url(/path/to/image.jpg);
}

#element:hover {
    background-image: url(/path/to/other_image.jpg);
}

Hay una descripción más larga aquí

Sin embargo, es aún mejor utilizar sprites: simple-css-image-rollover

ankit suthar
Respuesta editada 8º septiembre 2017 в 11:24
Comentarios (6)
 
$('img.over').each(function(){
    var t=$(this);
    var src1= t.attr('src'); // initial src
    var newSrc = src1.substring(0, src1.lastIndexOf('.'));; // let's get file name without extension
    t.hover(function(){
        $(this).attr('src', newSrc+ '-over.' + /[^.]+$/.exec(src1)); //last part is for extension   
    }, function(){
        $(this).attr('src', newSrc + '.' + /[^.]+$/.exec(src1)); //removing '-over' from the name
    });
});

Es posible que desee cambiar la clase de imágenes de la primera línea. Si necesita más clases de imágenes (o una ruta diferente) puede utilizar

$('img.over, #container img, img.anotherOver').each(function(){

y así sucesivamente.

Debería funcionar, no lo he probado :)

pawelmech
Respuesta editada 15º marzo 2011 в 2:40
Comentarios (3)