texto - Cambia la fuente de la imagen en rollover usando jQuery

jquery atributo id

Question

Tengo algunas imágenes y sus imágenes de rollover. Usando jQuery, quiero mostrar / ocultar la imagen de rollover cuando ocurre el evento onmousemove / onmouseout. Todos los nombres de mis imágenes siguen el mismo patrón, como este:

Imagen original: Image.gif

Rollover Image: Imageover.gif

Quiero insertar y eliminar la parte "sobre" de la fuente de la imagen en el evento onmouseover y onmouseout, respectivamente.

¿Cómo puedo hacerlo usando jQuery?

Answer 1

Adaptado del código de Richard Ayotte: para apuntar a un img en una lista ul / li (que se encuentra aquí a través de la clase div de wrapper), algo como esto:

$(''div.navlist li'').bind(''mouseenter mouseleave'', function() {    
    $(this).find(''img'').attr({ src: $(this).find(''img'').attr(''data-alt-src''), 
    ''data-alt-src'':$(this).find(''img'').attr(''src'') }
); 

Answer 2

Esperaba un linaje como über:

$("img.screenshot").attr("src", $(this).replace("foo", "bar"));

Answer 3

He hecho algo como el siguiente código :)

Solo funciona, cuando tienes un segundo archivo nombrado con _hover, por ejemplo, facebook.png y facebook_hover.png

$(''#social'').find(''a'').hover(function() {
    var target = $(this).find(''img'').attr(''src'');
    //console.log(target);
    var newTarg = target.replace(''.png'', ''_hover.png'');
    $(this).find(''img'').attr("src", newTarg);
}, function() {
    var target = $(this).find(''img'').attr(''src'');
    var newTarg = target.replace(''_hover.png'', ''.png'');
    $(this).find(''img'').attr("src", newTarg);
});

Answer 4

Mientras buscaba una solución hace algún tiempo, encontré un guión similar al siguiente, que después de algunos ajustes me puse a trabajar.

Maneja dos imágenes, que casi siempre están predeterminadas en "off", donde el mouse está fuera de la imagen (image-example_off.jpg), y el ocasional "on", donde para los tiempos del mouse está el mouse, la imagen alternativa requerida ( Se muestra la imagen-ejemplo_on.jpg).

<script type="text/javascript">        
    $(document).ready(function() {        
        $("img", this).hover(swapImageIn, swapImageOut);

        function swapImageIn(e) {
            this.src = this.src.replace("_off", "_on");
        }
        function swapImageOut (e) {
            this.src = this.src.replace("_on", "_off");
        }
    });
</script>

Answer 5

Para configurar en listo:

$(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);
        });
});

Answer 6

Sé que estás preguntando sobre 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 here

Aún mejor, sin embargo, es usar sprites: simple-css-image-rollover

Answer 7

Si la solución que busca es un botón animado, lo mejor que puede hacer para mejorar el rendimiento es la combinación de sprites y CSS. Un sprite es una imagen enorme que contiene todas las imágenes de su sitio (encabezado, logotipo, botones y todas las decoraciones que tiene). Cada imagen que tiene usa una solicitud HTTP, y mientras más solicitudes HTTP, más tiempo tomará cargar.

.buttonClass {
    width: 25px;
    height: 25px;
    background: url(Sprite.gif) -40px -500px;
}
.buttonClass:hover {
    width: 25px;
    height: 25px;
    background: url(Sprite.gif) -40px -525px;
}

Las coordenadas 0px 0px serán la esquina superior izquierda de tus sprites.

Pero si estás desarrollando un álbum de fotos con Ajax o algo así, entonces JavaScript (o cualquier marco) es lo mejor.

¡Que te diviertas!

Answer 8

Si tiene más de una imagen y necesita algo genérico que no dependa de una convención de nomenclatura.

HTML

<img data-other-src="big-zebra.jpg" src="small-cat.jpg">
<img data-other-src="huge-elephant.jpg" src="white-mouse.jpg">
<img data-other-src="friendly-bear.jpg" src="penguin.jpg">

JavaScript

$(''img'').bind(''mouseenter mouseleave'', function() {
    $(this).attr({
        src: $(this).attr(''data-other-src'') 
        , ''data-other-src'': $(this).attr(''src'') 
    })
});

Answer 9

Una solución genérica que no lo limita a "esta imagen" y "esa imagen" solo puede ser agregar las etiquetas ''onmouseover'' y ''onmouseout'' al código HTML en sí.

HTML

<img src="img1.jpg" onmouseover="swap(''img2.jpg'')" onmouseout="swap(''img1.jpg'')" />

JavaScript

function swap(newImg){
  this.src = newImg;
}

Dependiendo de su configuración, tal vez algo como esto funcionaría mejor (y requiere menos modificación de HTML).

HTML

<img src="img1.jpg" id="ref1" />
<img src="img3.jpg" id="ref2" />
<img src="img5.jpg" id="ref3" />

JavaScript / jQuery

// Declare Arrays
  imgList = new Array();
  imgList["ref1"] = new Array();
  imgList["ref2"] = new Array();
  imgList["ref3"] = new Array();

//Set values for each mouse state
  imgList["ref1"]["out"] = "img1.jpg";
  imgList["ref1"]["over"] = "img2.jpg";
  imgList["ref2"]["out"] = "img3.jpg";
  imgList["ref2"]["over"] = "img4.jpg";
  imgList["ref3"]["out"] = "img5.jpg";
  imgList["ref3"]["over"] = "img6.jpg";

//Add the swapping functions
  $("img").mouseover(function(){
    $(this).attr("src", imgList[ $(this).attr("id") ]["over"]);
  }

  $("img").mouseout(function(){
    $(this).attr("src", imgList[ $(this).attr("id") ]["out"]);
  }

Answer 10

    /* Teaser image swap function */
    $(''img.swap'').hover(function () {
        this.src = ''/images/signup_big_hover.png'';
    }, function () {
        this.src = ''/images/signup_big.png'';
    });

Answer 11

$(''img'').mouseover(function(){
  var newSrc = $(this).attr("src").replace("image.gif", "imageover.gif");
  $(this).attr("src", newSrc); 
});
$(''img'').mouseout(function(){
  var newSrc = $(this).attr("src").replace("imageover.gif", "image.gif");
  $(this).attr("src", newSrc); 
});

Answer 12

$(''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 desde la primera línea. Si necesita más clases de imágenes (o una ruta diferente) puede usar

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

y así.

Debería funcionar, no lo probé :)

Answer 13

<!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=iso-8859-1" />
<title>JQuery</title>
<script src="jquery.js" type="text/javascript"> </script>
<style type="text/css">
    #box{
        width: 68px;
        height: 27px;
        background: url(images/home1.gif);
        cursor: pointer;
    }
</style>

<script type="text/javascript">

$(function(){

    $(''#box'').hover( function(){
        $(''#box'').css(''background'', ''url(images/home2.gif)'');

    });
    $(''#box'').mouseout( function(){
        $(''#box'').css(''background'', ''url(images/home1.gif)'');

    });

});
</script>
</head>

<body>
<div id="box" onclick="location.href=''index.php'';"></div>
</body>
</html>

Answer 14

<img src="img1.jpg" data-swap="img2.jpg"/>



img = {

 init: function() {
  $(''img'').on(''mouseover'', img.swap);
  $(''img'').on(''mouseover'', img.swap);
 }, 

 swap: function() {
  var tmp = $(this).data(''swap'');
  $(this).attr(''data-swap'', $(this).attr(''src''));
  $(this).attr(''str'', tmp);
 }
}

img.init();