I'm trying to change an image on a web page two times, always after the user clicks on it. First I want to change from original.jpg to change1.jpg and then from change1.jpg to change2.jpg.
But no matter what, I can't get the following code to work:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The greatest page title ever</title>
<script type="text/javascript">
function image_control() {
if (document.getElementById('changingimage').src == 'original.jpg'){
document.getElementById("changingimage").src = 'change1.jpg';
}
if (document.getElementById('changingimage').src == 'change1.jpg'){
document.getElementById('changingimage').src = 'change2.jpg';
}
}
</script>
</head>
<body>
<img id="changingimage" src="original.jpg" onclick="image_control();" alt="a changing image" />
</body>
</html>
I think all you need is an one 4 letter word in front of your second IF statement...
"ELSE"
What happens now is that the first if-check kicks in, and changes the source of the image.
However, then the second if-statement ALSO kicks in, because it should...Unless you add ELSE before your second IF, to prevent them both from being triggered...
Code:
function image_control() {
if (document.getElementById('changingimage').src == 'original.jpg'){
document.getElementById("changingimage").src = 'change1.jpg';
}
else if (document.getElementById('changingimage').src == 'change1.jpg'){
document.getElementById('changingimage').src = 'change2.jpg';
}
}
- Spinner
Producer, Developer, Gamer, Father and Husband.
It's still not working though.. This really puzzles me now. My eyes are hurting for all the code chasing, but I just can't figure it out. Unless it has to do with the file paths somehow, since those are different in my code than in the example.
It probably IS a path issue...
If you're testing locally, the src is probably something like file:://Users/You/Documents/original.jpg or something like that...
Once live, it might work perfectly by itself..
To test this locally, I think this will work though, both locally and online...
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The greatest page title ever</title>
<script type="text/javascript">
function image_control() {
if (document.getElementById('changingimage').getAttribute('src') == 'original.jpg'){
document.getElementById('changingimage').setAttribute('src','change1.jpg');
}
else if (document.getElementById('changingimage').getAttribute('src') == 'change1.jpg'){
document.getElementById('changingimage').setAttribute('src','change2.jpg');
}
}
</script>
</head>
<body>
<img id="changingimage" src="original.jpg" onclick="image_control()" alt="a changing image" />
</body>
</html>
Either that, or don't check on the exact src, but check the END of the source, i.e. use a regEx to strip away anything before the filename.
Last edited by Spinner; 04-09-2012 at 05:52 PM.
Reason: Added the regex thingie
- Spinner
Producer, Developer, Gamer, Father and Husband.
Reply With Quote
Bookmarks