SO I am trying to create a screen that will display about 50 toggle buttons to display in a building on a monitor.
I want to create a bunch of images to use as the toggle so they are easy to see. This is the effect I want. .asp?filename=trydhtml_intro except picture I want several light bulbs to turn on and off as I want.
Right now this is the code I have. I am able to click the images to change as I want, they just wont go back, any ideas?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" ".dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function changeImg(img, newimg) {
img.src = newimg;
}
</script>
<body>
<img onclick="changeImg(this, 'staten_uw.jpg')" src="staten_moored.jpg">
<img onclick="changeImg(this, 'block_uw.jpg')" src="block_moored.jpg">
</body>
</html>
SO I am trying to create a screen that will display about 50 toggle buttons to display in a building on a monitor.
I want to create a bunch of images to use as the toggle so they are easy to see. This is the effect I want. http://www.w3schools./dhtml/tryit.asp?filename=trydhtml_intro except picture I want several light bulbs to turn on and off as I want.
Right now this is the code I have. I am able to click the images to change as I want, they just wont go back, any ideas?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function changeImg(img, newimg) {
img.src = newimg;
}
</script>
<body>
<img onclick="changeImg(this, 'staten_uw.jpg')" src="staten_moored.jpg">
<img onclick="changeImg(this, 'block_uw.jpg')" src="block_moored.jpg">
</body>
</html>
- Just for your own knowledge, w3schools is bad. w3fools. – Jason L. Commented Jul 20, 2012 at 16:48
3 Answers
Reset to default 2They don't go back because the code always changes it to the _uw images. If you want them to toggle, the function needs to check what image is currently displayed. Something like this:
function changeImg(img) {
if ( img.src.indexOf("_uw") > 0 ) {
img.src = img.src.replace("_uw","_moored");
}
else {
img.src = img.src.replace("_moored","_uw");
}
}
will work if you have 50x2 different images, named "img1_uw.jpg", "img1_moored.jpg", "img2_uw.jpg", "img2_moored.jpg", etc.
If you only have 2 images, but want 50 buttons that each toggle between them, it's easier:
function changeImg(img) {
if ( img.src == "staten_uw.jpg" ) {
img.src = "staten_moored.jpg";
}
else {
img.src = "staten_uw.jpg";
}
}
Other answers have shown this quite simply as well.
Either way, the HTML should change to something like this:
<img onclick="changeImg(this)" src="block_moored.jpg">
You can do this:
window.onload = function() {
images = document.getElementsByTagName("img");
for (i in images) {
images[i].addEventListener("click", function(e) {
var newsrc = this.togglesrc;
this.togglesrc = this.src;
this.src = newsrc;
});
}
};
and then use
<img togglesrc="staten_uw.jpg" src="staten_moored.jpg" />
In your case, you should use only one img tag:
<img onclick="changeImg(this)" src="staten_moored.jpg">
and check logic in your js:
function changeImg(img) {
img.src = (img.src == 'staten_moored.jpg') ? 'block_moored.jpg' : 'staten_moored.jpg';
}