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 :)
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.
@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';
}
activate or deactivate in the url and make condition of returned result :)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";
}
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.
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);"/>
img.alt attribute?
alt imho, was better though.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 :)