jQuery levetta per cambiare immagine

Question

Ho una lista di div con le immagini in loro:

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

Quando un utente fa clic sul div, mi piacerebbe che per cambiare l'immagine di x-on.png, quando cliccato di nuovo, cambierà in x-off.png, e quando cliccato una terza volta dovrebbe tornare a x.png.

E 'possibile farlo senza specificare manualmente jQuery per ogni cambio di immagine? Posso attraversare il div e trovare il nome dell'immagine e semplicemente aggiungere l'opzione -off/-on all'immagine?

Grazie!

Answer 1

FWIW, suggerisco di farlo usando il semplice CSS e background-image. Mi sembra che queste non siano immagini normali, ma piuttosto "pulsanti".

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

Forse CSS sprites avrebbe potuto funzionare?

che si salva dal caricamento di un'immagine separata ogni volta che si fa clic sull'immagine (tasto?), E si potrebbe risolvere il problema con l'aggiunta e la rimozione di un css-class, per esempio:

$('.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 sarebbe davvero il modo per fare questo, ma solo per completezza, ecco un'altra opzione.

Normalmente io sono l'ultimo a raggiungere per una regexp, ma credo che vi aiuteranno qui

$('.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

Ho trovato questo plugin utile per fare qualcosa di simile a quello che hai chiesto:

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

ho creato 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);