CODEWITHSUNDEEP
javascripthtmlimage
Drwhite
Drwhite

Reputation: 1685

src image changer after click with JavaScript

I have this image in my html page:

<img src="/images/deactivate.png" onclick="act_deact(this);"/>

and in my javascript code i have this:

function act_deact(image) {
    image.src = (image.src=="/images/activate.png" ) ? "/images/deactivate.png" : "/images/activate.png";
}

and when i click on the image that initially deactivated it activate but in the second click it doesn't desactivate !

is there any probleme with my code ?

from JS amateur :)

Upvotes: 0

Views: 137

Answers (6)

Drwhite
Drwhite

Reputation: 1685

I found the solution myself :p and i have tried @fardjad proposition that is looking for string in the url and make conditions

i share the solution :)

function act_deact(image) {
if(image.src.indexOf('deactivate') != -1)
   image.src="/images/activate.png";
else 
   image.src="/images/deactivate.png";
}

@hjpotter92: the solution with check condition on image.alt works to:

html:

<img alt="deactivate" src="/images/deactivate.png" onClick="act_deact(this);" />

the Js function :

function act_deact(image) { 
    if (image.alt=="activate") {
       image.src = "/images/deactivate.png";
       image.alt = "deactivate"                                          }
    else {  
       image.src = "/images/activate.png"; 
       image.alt = "activate"
    }
}

thanks for your responses :)

Upvotes: 0

ljubiccica
ljubiccica

Reputation: 480

To make it work with relative url you can simply save current url like this:

var newsrc = "/images/deactivate.png";
function act_deact(image) {
  if ( newsrc == "/images/deactivate.png" ) {
    image.src = "/images/activate.png";
    newsrc  = "/images/activate.png";
  }
  else {
    image.src = "/images/deactivate.png";
    newsrc  = "/images/deactivate.png";
  }
}

and then call it

<img src="/images/deactivate.png" onclick="act_deact(this);"/>

Upvotes: 0

igorpavlov
igorpavlov

Reputation: 3626

The first thing is brackets which should be like this:

image.src = (image.src=="/images/activate.png" ? "/images/deactivate.png" : "/images/activate.png")

Also try image.getAttribute("src") and image.setAttribute("src") instead of image.src.

Please try this code:

function act_deact(image) {
    image.setAttribute("src", (image.getAttribute("src")=="/images/activate.png" ? "/images/deactivate.png" : "/images/activate.png"))
}

Edit: other answers tell you about the issue of absolute and relative urls, so getAttribute will fix that issue. I do not recommend to use RegExp or substrings here.

Upvotes: 0

Michael Besteck
Michael Besteck

Reputation: 2423

The image.src contains the canonical path, even if initialised with a relative path. You can either use the full path in the condition like 

function act_deact(image) {
    image.src = (image.src=="FULL-PATH-OF-IMAGE" ) ? "/images/deactivate.png" : "images/activate.png";
}

(to get the full path one may use alert(image.src);)

or, if all your images have unique names

function act_deact(image) {
    image.src = image.src.match(/activate.png$/) ? "/images/deactivate.png" : "images/activate.png";
}

Upvotes: 0

fardjad
fardjad

Reputation: 20394

@hjpotter92 already explained the reason it doesn't work.

One way to make it work is to check if src ends with /images/activate.png:

var activateURL = '/images/activate.png';
if (img.src.substring(img.src.length - activateURL.length) !== activateURL) {
    image.src = '/images/activate.png';
} else {
    image.src = '/images/deactivate.png';
}

Upvotes: 0

hjpotter92
hjpotter92

Reputation: 80639

This is because when you set it to(or it changes to) /images/activate.png on first click, the src attribute is no longer just /images/activate.png but it gets prefixed with the server-address.

You can check it here: http://jsfiddle.net/hGcqq/

Or on your own server, use a console.log or an alert if you prefer.

Upvotes: 4

Related Questions