11

I have a list of divs with images in them:

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

When a user clicks the div, I'd like it to change the image to x-on.png, when clicked again, it'll change to x-off.png, and when clicked a third time it should revert to x.png.

Is it possible to do this without manually specifying jQuery for every image change? Can I traverse the div and find the image name, and simply append the -off/-on to the image?

Thanks!

Jim G.
  • 15,141
  • 22
  • 103
  • 166
hejog
  • 163
  • 1
  • 2
  • 9

8 Answers8

22

Perhaps CSS sprites would work for you?

That would save you from loading a separate image every time you click the image (button?), and you could solve your problem by adding and removing a css-class, e.g.:

$('.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');
        }
    }
);
nikc.org
  • 16,462
  • 6
  • 50
  • 83
  • Both states will be loaded and ready when the user hits the button, oh and you reduce your requests which is always a good idea :) – Tom Jun 30 '09 at 10:42
  • This is, without a doubt, the route I would take to achieve what the asker needs. – Travis Jun 30 '09 at 15:38
10

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"});
  }
);
jeroen.verhoest
  • 5,173
  • 2
  • 27
  • 27
3

CSS Sprites would indeed be the way to do this, but just for completeness, here's another option.

Normally I'm the last to reach for a regexp, but I think they'll help here

$('.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'));
    }
});
Dan F
  • 11,958
  • 3
  • 48
  • 72
1

FWIW, I suggest you do this using plain CSS and background-image. It sounds to me that this is not really normal images, but rather "buttons".

Deniz Dogan
  • 25,711
  • 35
  • 110
  • 162
  • each "button" has different images [and different toggle images]? – hejog Jun 30 '09 at 09:45
  • I don't know how many images there are, but if there are just a few, the approach that I suggested still works - just apply another class e.g. "one", "two" or "three" depending on which state the button is in. – Deniz Dogan Jun 30 '09 at 09:54
1

I have found this plugin useful to do something similar to what you asked:

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

Steve Ingram
  • 81
  • 1
  • 2
0
$('.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;    
    }
});
karim79
  • 339,989
  • 67
  • 413
  • 406
  • sorry, by "x" i meant the name of the image in the div, so it'd be nyt, theguardian, etc etc... can that be selected via jquery? – hejog Jun 30 '09 at 09:57
0
$("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/

Syed
  • 15,657
  • 13
  • 120
  • 154
0

I created plugin swapimg: http://xuannd.wordpress.com/2010/12/03/jquery-swap-images-easy/
use: $('.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);
xuannd
  • 1