CODEWITHSUNDEEP
jqueryimageclick
maccas28
maccas28

Reputation: 19

Change image on click then back to original image on another image click

I need some help changing an image on click then changing it back to the original image when another image is clicked. All I have so far is changing the image on the first click, but I don't know the next part, that it goes back to the original image when ANOTHER image is clicked. This is what I have:

$(function() {
    $('#two').click(function(){
        $("#imgtwo").attr('src',"resources/items/icon2blue.png"); 
    });
});

Any help would be appreciated! Thanks!

Upvotes: 1

Views: 3144

Answers (4)

vipulsharma
vipulsharma

Reputation: 1250

$(function() {
    $('#two').click(function(){
        $('#imgtwo').data('targetsrc',$(this).attr('src'));
        $("#imgtwo").attr('src',"resources/items/icon2blue.png");
    });


    $('#imgtwo').click(function(){
        $("#two").attr('src',$(this).data('targetsrc'));
        $('#two').data('targetsrc',$(this).attr('src'));
    });
});

try this.set another attrib and get value from it

Upvotes: 2

Scott Helme
Scott Helme

Reputation: 4799

When you click on any image, change the image and reset all other images back to their default image. That way, each time any given image is clicks, it will change and you know all others will be set back to default. 

$('#one').click(function(){
    $("#imgone").attr('src',"resources/items/click-image.png");
    $("#imgtwo").attr('src',"resources/items/standard-image.png");
    $("#imgthree").attr('src',"resources/items/standard-image.png"); 
});
$('#two').click(function(){
    $("#imgone").attr('src',"resources/items/standard-image.png");
    $("#imgtwo").attr('src',"resources/items/click-image.png");
    $("#imgthree").attr('src',"resources/items/standard-image.png"); 
});
$('#three').click(function(){
    $("#imgone").attr('src',"resources/items/standard-image.png");
    $("#imgtwo").attr('src',"resources/items/standard-image.png");
    $("#imgthree").attr('src',"resources/items/click-image.png"); 
});

My JS is rusty but you get the idea.

Upvotes: 0

Raptor
Raptor

Reputation: 54260

You can use this approach:

$(function() {
    var count = 0;
    $('#two').click(function(){
        $("#imgtwo").attr('src',"resources/items/icon2blue.png"); 
    });
    $('#image2').click(function(){ // do it with other images
        if(count < 4) {
            count++;
        } else {
            // reset to original image
            count = 0;
            $("#imgtwo").attr('src',"resources/items/original_image.png"); 
        }
    });
});

Assuming another image has id of another_image.

Alternatively, you probably want to have a toggle image, which can be done as follow:

$(function() {
    var img_state = true;
    $('#two').click(function(){
        if(img_state) {
            $("#imgtwo").attr('src',"resources/items/icon2blue.png"); 
        } else {
            $("#imgtwo").attr('src',"resources/items/another_image.png"); 
        }
        img_state = !img_state;
    });
});

Upvotes: 0

backtrack
backtrack

Reputation: 8154

var imgArray = [  
 'http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Brain_human_sagittal_section.svg/295px-Brain_human_sagittal_section.svg.png',
 'http://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Solanum_muricatum_Flower_and_Fruit.jpg/220px-Solanum_muricatum_Flower_and_Fruit.jpg'
];

var counter = 0;
document.getElementById('my_button').onclick = function () {  
    document.getElementById('mainImage').src = imgArray[counter % imgArray.length]; 
    counter += 1;
}

Hope this will be helpful

try this fiddle

http://jsfiddle.net/sornalingam/XyezG/

Upvotes: 0

Related Questions