Home/ Questions/Q 8271549
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T06:52:42+00:00

SO I am trying to create a screen that will display about 50 toggle

  • 0

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.com/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.org/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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    They 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 50×2 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">
    • 0