CODEWITHSUNDEEP
javascripthtml
gnarly-line
gnarly-line

Reputation: 18

Switch between two images onclick

This question has been asked before, but none of what I've found works. I need to switch an image to another on click, and then back with another click.

<img id="searchicon" src="ddg.png" width="26px" height="26px" 
     onclick="this.src = ((this.src === 'ddg.png') ? 'logo.png' : 'ddg.png');">

This should work. onclick should be comparing src to ddg.png and returning true, replacing src="ddg.png" with src="logo.png". However, it doesn't. If I change the original src to logo.png (or change the order of the operator), the operator will switch to ddg.png, but not back to logo.png. I have no clue why this is happening. No console errors are being produced. I have also tried writing this operator in a separate file and linking it in, as well as writing if..else statements. They all will switch from ddg.png to logo.png, but not the other way.

Upvotes: 0

Views: 3113

Answers (6)

OJay
OJay

Reputation: 4921

Generally the browser will return the src of an image as the full URL, your code will not match the filename. Either use the whole URL to match (although this can be quite lengthy) or just look for a partial match

e.g. full URL

<img id="searchicon" src="ddg.png" width="26px" height="26px" 
     onclick="this.src = ((this.src === 'http://www.whateveryoursiteis.com/ddg.png') ? 'logo.png' : 'ddg.png');">

or just check for the occurrence of that filename somewhere in the string

 <img id="searchicon" src="ddg.png" width="26px" height="26px" 
         onclick="this.src = ((this.src.indexOf('ddg.png') > -1) ? 'logo.png' : 'ddg.png');">

Although bear in mind the new src that you set it to must be either absolute, or a relative path in regards to the HTML page that it is on, the examples above assume that your pictures are in same directory as your html page

Upvotes: 0

Pbk1303
Pbk1303

Reputation: 3802

Your code works fine for me . check this fiddle : TOGGLE IMAGES

<img id="searchicon" src="https://i.sstatic.net/hi0uj.png?s=32&g=1" width="26px" height="26px" 
     onclick="this.src = ((this.src === 'https://i.sstatic.net/hi0uj.png?s=32&g=1') ? 'https://i.sstatic.net/BuFJV.jpg?s=32&g=1' : 'https://i.sstatic.net/hi0uj.png?s=32&g=1');">

Try checking whether you have specified the image path right.

Upvotes: 0

NewIsAlwaysBetter
NewIsAlwaysBetter

Reputation: 106

If your src is referencing a file from your local system, it will not be equal to ddg.png, instead try the absolute path file://yourpath/ddg.png

Upvotes: 1

gnarly-line
gnarly-line

Reputation: 18

Answer: I was expecting a relative path and instead got an absolute path. Thanks to OJay for suggesting outputting this.src.

Upvotes: 0

user2575725
user2575725

Reputation:

Try this example:

<img src="http://dizzyfrinks.com/wp-content/uploads/2010/11/65sprite.jpg" onclick="swap(this);"/>

script

var swap = function (img) {
    img.src = 'http://dizzyfrinks.com/wp-content/uploads/2010/11/65sprite.jpg' === img.src ?
        'http://www.wired.com/images_blogs/gadgetlab/sprite.jpg'
    : 'http://dizzyfrinks.com/wp-content/uploads/2010/11/65sprite.jpg';
};

Upvotes: 0

Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9508

Small jQuery script written for the same. Its just a basic.

http://jsfiddle.net/35cfzfv4/

HTML

<img src="http://imgsv.imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg" class="swapimg">

JS

$( document ).ready(function() {
    var dimg = "http://imgsv.imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg";
    var imgswitch = false;
    $('.swapimg').click(function(){
        if(imgswitch){
             $(this).attr('src','http://imgsv.imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg');
             imgswitch = false;
        }else{
             $(this).attr('src','http://imgsv.imaging.nikon.com/lineup/dslr/df/img/sample/img_02.jpg');
             imgswitch = true;
        }
    })
});

Upvotes: 0

Related Questions