javascript - sweet - Cambiando la fuente de la imagen usando jQuery

manipular imagenes con javascript

Question

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 <img src="imgx_off.gif"> src cambie a <img src="imgx_off.gif"> donde x representa el número de imagen 1 o 2.

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

Answer 1

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

Answer 2

Le mostraré cómo cambiar la fuente src , de modo que cuando haga clic en una imagen, ésta gire a través de todas las imágenes que están en su HTML (específicamente en su clase d1 id y c1 ) ... si tiene 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, para que solo se muestre una imagen inicialmente.

El codigo 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();

    });
});

El desglose

1. Cree una copia de los enlaces que contienen las imágenes (nota: también puede hacer uso del atributo href de los enlaces para una funcionalidad adicional ... 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. Enlazar 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á utilizando ++$imgShow % $length para recorrer el objeto jQuery que contiene las imágenes. ++$imgShow % $length primero aumenta nuestro contador en uno, luego modifica ese número con la cantidad de imágenes que hay. Esto mantendrá el ciclo del índice resultante de 0 a length-1 , que son los índices del objeto $images . Esto significa que este código funcionará con 2, 3, 5, 10 o 100 imágenes ... pasando por cada imagen en orden y reiniciando en la primera imagen cuando se alcance la última imagen.

   Además, attr() se usa para obtener y establecer el atributo "src" de las imágenes. Para seleccionar elementos del objeto $images , configuro $images como el contexto jQuery utilizando el formulario $(selector, context) . Luego uso .eq() para seleccionar solo el elemento con el índice específico en el que estoy interesado.

Ejemplo de jsFiddle con 3 imágenes.

También puede almacenar el src s en una matriz.
Ejemplo de jsFiddle con 3 imágenes.

Y aquí es cómo incorporar las hrefs de las etiquetas de anclaje alrededor de las imágenes:
Ejemplo de jsFiddle

Answer 3

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

La única manera 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 class o id con esa imagen.

Así que la lógica será seleccionar los elementos dentro del div donde se ubican las imágenes.

Luego, seleccione todos los elementos de imágenes con bucle 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>

Answer 4

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.

He buscado resolver este problema pero no he encontrado nada.

La solución es poner el ''/' al principio de la ruta: $("#myid").attr(''src'', ''/images/sample.gif'');

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

Answer 5

Puedes usar la función attr() jQuery. Por ejemplo, si su etiqueta img tiene un atributo id de ''my_image'', haría esto:

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

Entonces puedes cambiar el src de tu imagen con jQuery de esta manera:

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

Para adjuntar esto a un evento de click , puede escribir:

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

Para rotar la imagen, puedes hacer esto:

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

Answer 6

SI no solo hay jQuery u otros marcos de eliminació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 puede ser escrito 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>

Answer 7

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'');
});

Answer 8

También puedes 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 varios estados para la fuente de la imagen.

Answer 9

Tengo la misma maravilla hoy, lo hice de esta manera:

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

Answer 10

Tuve el mismo problema al intentar llamar el 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 utiliza para generar una nueva imagen 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 enviar la imagen.

Answer 11

Uno de los errores comunes que las personas cometen cuando cambian la fuente de la imagen no es esperar a que la carga de la imagen realice acciones posteriores, como la maduración del tamaño de la imagen, etc. Deberá usar el .load() jQuery .load() para hacer cosas después de cargar 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://.com/a/670433/561545