Cambiar la fuente de la imagen usando jQuery

764

Mi DOM se ve así:

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

Cuando alguien hace clic en una imagen, quiero que la imagen src cambie a <img src="imgx_off.gif">donde xrepresenta el número de imagen 1 o 2.

¿Es esto posible o tengo que usar CSS para cambiar las imágenes?

javascript jquery image usuario67033
fuente
Si desea algo con jQuery, puede consultar el jQuery Cycle Plugin, demo scrollRight (ejemplo de abajo a la derecha)
TomHastjarjanto
43
jQuery ("# ​​my_image"). attr ("src", "first.jpg")
nautiyal manish
99
Realmente deberías aceptar la respuesta de jonstjohn :) El número de votos positivos tanto en la pregunta como en la respuesta indica que muchas personas se han topado con esto. Mejoraría la pregunta tener una respuesta aceptada.
Xcelled
44
Hasta la fecha, es decir 19th July, 2016 15:39 PM, el recuento de votos a favor 369 y @jonstjohn el recuento de votos a favor 931 . Pero, qué mala suerte, @OP no inició sesión después Feb 17 '09 at 2:57. :(Y, @jonstjohn La respuesta permanece sin marcar .
Nana Partykar
@Xcelled, el único problema es que la respuesta de jonstjohn no responde la pregunta. Es un punto menor pero que vale la pena hacer. Eche un vistazo a la respuesta de inco, ya que es la única aquí que realmente responde la pregunta correctamente.
David Newcomb

Respuestas:

1687

Puede usar la función attr () de jQuery . Por ejemplo, si su imgetiqueta tiene un idatributo de 'my_image', haría esto:

<img id="my_image" src="first.jpg"/>

Luego puede cambiar el aspecto srcde su imagen con jQuery de esta manera:

$("#my_image").attr("src","second.jpg");

Para adjuntar esto a un clickevento, puede escribir:

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

Para rotar la imagen, puede hacer esto:

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});
jonstjohn
fuente
79

Uno de los errores comunes que comete la gente cuando cambia la fuente de la imagen no es esperar a que la carga de la imagen realice acciones posteriores, como el tamaño de la imagen en maduración, etc. Deberá usar el .load()método jQuery para hacer cosas después de la carga de la imagen.

$('yourimageselector').attr('src', 'newsrc').load(function(){
    this.width;   // Note: $(this).width() will not work for in memory images

});

Motivo de la edición: https://stackoverflow.com/a/670433/561545

Mohsen
fuente
Si. Esto finalmente hizo el truco. .destroy () no llega lo suficientemente lejos. Nuking todo el html y que init de nuevo realmente funciona al intercambiar imágenes de varios tamaños y tal.
Matt J.
tenga en cuenta que la carga no se disparará de manera confiable, especialmente si la imagen está en el caché. Consulte la documentación de jQuery.
Twilite
19

Para más información. Intento configurar el atributo src con el método attr en jquery para la imagen del anuncio usando la sintaxis, por ejemplo:$("#myid").attr('src', '/images/sample.gif');

Esta solución es útil y funciona, pero si cambia la ruta, cambie también la ruta de la imagen y no funcione.

Estoy buscando resolver este problema pero no encontré nada.

La solución es poner el '\' al comienzo del camino: $("#myid").attr('src', '\images/sample.gif');

Este truco es muy útil para mí y espero que sea útil para otros.

wphonestudio
fuente
18

SI no solo hay jQuery u otros marcos de destrucción de recursos, muchos kb para descargar cada vez por cada usuario solo por un simple truco, sino también JavaScript nativo (!):

<img src="img1_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';">
<img src="img2_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';">

Esto se puede escribir en general y más elegante:

<html>
<head>
<script>
function switchImg(img){
    img.src = img.src.match(/_on/) ? 
        img.src.replace(/_on/, "_off") : 
        img.src.replace(/_off/, "_on");
}
</script>
</head>
<body>
    <img src="img1_on.jpg" onclick="switchImg(this)">
    <img src="img2_on.jpg" onclick="switchImg(this)">
</body>
</html>
En co
fuente
Siempre me sorprende cuántas personas no pueden leer una pregunta y dar la respuesta solicitada. Me pareció obvio (y a usted) que la pregunta estaba buscando una solución genérica, por eso el OP dio 2 ejemplos. Y sin embargo, todos los demás parecían no solo extrañarlo por completo, sino dar una respuesta que ni siquiera respondía la pregunta. :(
David Newcomb
17

Le mostraré cómo cambiar la imagen src, de modo que cuando haga clic en una imagen, rote a través de todas las imágenes que están en su HTML (en su d1identificación y c1clase específicamente) ... ya sea que tenga 2 o más imágenes en su HTML .

También le mostraré cómo limpiar la página una vez que el documento esté listo, de modo que inicialmente solo se muestre una imagen.

El código completo

$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );  

    $("#d1 > .c1 > a").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});

La caida

  1. Cree una copia de los enlaces que contienen las imágenes (nota: también puede utilizar el atributo href de los enlaces para agregar funcionalidad ... por ejemplo, mostrar el enlace de trabajo debajo de cada imagen ):

        var $images = $("#d1 > .c1 > a").clone();  ;

  2. Verifique cuántas imágenes había en el HTML y cree una variable para rastrear qué imagen se muestra:

    var $length = $images.length;
var $imgShow = 0;

  3. Modifique el HTML del documento para que solo se muestre la primera imagen. Eliminar todas las otras imágenes.

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );

  4. Enlace una función para manejar cuando se hace clic en el enlace de la imagen.

        $("#d1 > .c1 > a").click(function(event) { 
        $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();
    });

    El corazón del código anterior está usando ++$imgShow % $length para recorrer el objeto jQuery que contiene las imágenes. ++$imgShow % $lengthprimero aumenta nuestro contador en uno, luego modifica ese número con cuántas imágenes hay. Esto mantendrá el índice resultante cambiando de 0a length-1, que son los índices del $imagesobjeto. Esto significa que este código funcionará con 2, 3, 5, 10 o 100 imágenes ... recorriendo cada imagen en orden y reiniciando en la primera imagen cuando se alcanza la última imagen.

    Además, .attr()se utiliza para obtener y establecer el atributo "src" de las imágenes. Para elegir elementos entre el $imagesobjeto, configuro $imagescomo el contexto jQuery usando el formulario $(selector, context). Luego uso .eq()para elegir solo el elemento con el índice específico que me interesa.

Ejemplo de jsFiddle con 3 imágenes


También puede almacenar los srcs en una matriz.
Ejemplo de jsFiddle con 3 imágenes

Y aquí se explica cómo incorporar los hrefs de las etiquetas de anclaje alrededor de las imágenes:
ejemplo de jsFiddle

Peter Ajtai
fuente
17

Espero que esto pueda funcionar

<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />
<button id="changeSize">Change Size</button>
$(document).ready(function() {
    var flag = 0;
    $("button#changeSize").click(function() {
        if (flag == 0) {
            $("#dummyimage").attr("src", "http://dummyimage.com/250x155/");
            flag = 1;
        } else if (flag == 1) {
            $("#dummyimage").attr("src", "http://dummyimage.com/450x255/");
            flag = 0;
        }
    });
});
Zeeshan
fuente
Si bien este fragmento de código puede resolver la pregunta, incluir una explicación realmente ayuda a mejorar la calidad de su publicación. Recuerde que está respondiendo la pregunta para los lectores en el futuro, y que esas personas podrían no conocer los motivos de su sugerencia de código.
Derek Brown
Gracias Derek tendrá esto en mente desde la próxima vez
Zeeshan
14

Debería agregar el atributo id a su etiqueta de imagen, así: 

<div id="d1">
   <div class="c1">
            <a href="#"><img id="img1" src="img1_on.gif"></a>
            <a href="#"><img id="img2" src="img2_on.gif"></a>
   </div>
</div>

entonces puede usar este código para cambiar la fuente de las imágenes:

 $(document).ready(function () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });
Mr Bitmap
fuente
9

También puede hacer esto con jQuery de esta manera:

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

Puede tener una condición si hay múltiples estados para la fuente de la imagen.

FernandoEscher
fuente
55
Esta sintaxis no es correcta. La función jquery attr () toma 1 o 2 parámetros. El primero es una cadena con el nombre del atributo HTML, el segundo es el valor para ese atributo que desea establecer.
Thiago Silva
7

Tuve el mismo problema al intentar llamar al botón re captcha. Después de algunas búsquedas, ahora la siguiente función funciona bien en casi todos los navegadores famosos (Chrome, Firefox, IE, Edge, ...):

function recaptcha(theUrl) {
  $.get(theUrl, function(data, status){});
  $("#captcha-img").attr('src', "");
  setTimeout(function(){
       $("#captcha-img").attr('src', "captcha?"+new Date().getTime());
  }, 0);
 }

'theUrl' se usa para representar una nueva imagen de captcha y puede ignorarse en su caso. El punto más importante es generar una nueva URL que obligue a FF e IE a volver a procesar la imagen.

Kayvan Tehrani
fuente
7

Cambiar la fuente de la imagen usando jQuery click()

elemento:

    <img class="letstalk btn"  src="images/chatbuble.png" />

código:

    $(".letstalk").click(function(){
        var newsrc;
        if($(this).attr("src")=="/images/chatbuble.png")
        {
            newsrc="/images/closechat.png";
            $(this).attr("src", newsrc);
        }
        else
        {
            newsrc="/images/chatbuble.png";
            $(this).attr("src", newsrc);
        }
    });
Abhijit Poojari
fuente
7

En caso de que actualice la imagen varias veces y se CACHE y no se actualice, agregue una cadena aleatoria al final:

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());
kintsukuroi
fuente
1
¡Es muy importante, al menos para mí, agregar la cadena aleatoria al final! Tanques!
Marcelo Sader
3

Hoy tengo la misma maravilla que hice de esta manera:

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});
Anyone_ph
fuente
3

Esta es una forma garantizada de hacerlo en Vanilla (o simplemente Pure) JavaScript:

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;
Raymond Wachaga
fuente
1

Solo una adición, para hacerlo aún más pequeño: 

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});
Szél Lajos
fuente
-1

No hay forma de cambiar la fuente de la imagen con CSS.

La única forma posible es usar Javascript o cualquier biblioteca de Javascript como jQuery .

Lógica-

Las imágenes están dentro de un div y no hay classo idcon esa imagen.

Entonces la lógica será seleccionar los elementos dentro del lugar divdonde se ubican las imágenes.

Luego seleccione todos los elementos de imágenes con loop y cambie la imagen src con Javascript / jQuery .

Código de ejemplo con salida de demostración

$(document).ready(function()
{
    $("button").click(function()
    {
      $("#d1 .c1 a").each(function()
      {
          $(this).children('img').attr('src', 'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe');
      });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

<button>Change The Images</button>
Expandir fragmento

Abrar Jahin
fuente