jQuery de palanca para cambiar la imagen

Question

tengo una lista de divs con imágenes en ellos:

<div class="wizard-img"><%= image_tag("sources/pix/nyt.png") %></div> 
<div class="wizard-img"><%= image_tag("sources/pix/theguardian.png") %></div> 

Cuando un usuario hace clic en el div, me gustaría que cambie la imagen de x-On.png, cuando volvió a hacer clic, cambiará a x-off.png, y cuando se haga clic una tercera vez, debería volver a x.png.

¿Es posible hacer esto sin especificar manualmente jQuery para cada cambio de imagen? ¿Puedo recorrer el div y encontrar el nombre de la imagen, y simplemente agregar el -off/-on a la imagen?

Gracias!

Answer 1

FWIW, sugiero que hagas esto usando CSS simple y background-image. Me parece que esto no es realmente imágenes normales, sino más bien "botones".

Answer 2

$('.wizard-img').click(function() { 
    var img = $(this).find('img'); 
    var src = img.attr('src'); 

    //image is neither on nor off, so change src to on and return 
    if(src != 'x-on.png' && src != 'x-off.png') { 
     img.attr('src','x-on.png'); 
     return false; 
    } 

    //image is on, so change src to off and return 
    if(src == 'x-on.png') { 
     img.attr('src','x-off.png'); 
     return false;  
    } 

    //image is off, so change src to x and return 
    if(src == 'x-off.png') { 
     img.attr('src','x.png'); 
     return false;  
    } 
}); 

Answer 3

Tal vez CSS sprites iba a trabajar para usted?

Eso le ahorraría a partir de la carga de una imagen separada cada vez que hace clic en la imagen (botón?), Y se podía resolver su problema mediante la adición y la eliminación de una clase CSS, por ejemplo:

$('.wizard-img').click(
    function() { 
     if ($(this).hasClass('on')) { 
      $(this).removeClass('on').addClass('off'); 
     } else if ($(this).hasClass('off')) { 
      $(this).removeClass('off'); 
     } else { 
      $(this).addClass('on'); 
     } 
    } 
); 

Answer 4

http://docs.jquery.com/Events/toggle

$(".wizard-img").toggle(
    function() { 
    $(this).find("img").attr({src:"x-on.png"}); 
    }, 
    function() { 
    $(this).find("img").attr({src:"x-off.png"}); 
    }, 
    function() { 
    $(this).find("img").attr({src:"x.png"}); 
    } 
); 

Answer 5

CSS Sprites de hecho, sería la forma para hacer esto, pero simplemente para la corrección, aquí hay otra opción.

Normalmente yo soy el último en llegar a una expresión regular, pero creo que van a ayudar aquí

$('.wizard-img').click(function() { 
    var $img = $(this).find('img') , 
     src = $img.attr('src') , 
     onCheck = /\-on\.jpg$/ , 
     offCheck = /\-off\.jpg$/ , 
     normal = /\.jpg$/ 
    ; 

    if(src.match(onCheck)) { 
     $img.attr('src', src.replace(onCheck, '-off.jpg')); 
    } else if (src.match(offCheck)) { 
     $img.attr('src', src.replace(offCheck, '.jpg')); 
    } else { 
     $img.attr('src', src.replace(normal, '-on.jpg')); 
    } 
}); 

Answer 6

He encontrado este plugin útil para hacer algo similar a lo que has pedido:

http://www.malsup.com/jquery/cycle/

Answer 7

$("img").hover(
    function() { this.src = this.src.replace("_Off", "_On");}, 
    function() { this.src = this.src.replace("_On", "_Off"); 
}); 

http://kaidez.com/tutorial-simple-effective-jquery-image-rollover/

Answer 8

creé pl ugin swapimg: http://xuannd.wordpress.com/2010/12/03/jquery-swap-images-easy/
uso: $ ('. swapimg'). swapimg();
opt: $ ('. Swapimg'). Swapimg ({imgOn: "_ on.png", imgOff: ". Png"});

(function($){ 
    $.fn.swapimg=function(options){ 
     var defaults={imgOn:"_on.gif",imgOff:".gif"}; 
     var options=$.extend(defaults,options); 
     var $isOn=false; 
     var $obj_index=-1; 
     return this.each(
      function(){ 
       if($(this).is('img')){ 
        obj=$(this) 
       } 
       else{ 
        obj=$(this).find('img') 
       } 
       obj.hover(
        function(){ 
         if(this.src.indexOf('_on')==-1){ 
          $isOn=false 
         }else{ 
          $isOn=true 
         } 

         if($isOn==false){ 
          this.src=this.src.replace(options.imgOff,options.imgOn) 
         } 
        }, 
        function(){ 
         if($isOn==false){ 
          this.src=this.src.replace(options.imgOn,options.imgOff) 
         } 
        } 
       ) 
      } 
     ) 
    } 
})(jQuery);