Home/ Questions/Q 7742759
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T09:21:28+00:00

Ok, I am using JavaScript to control an image swap so that when someone

  • 0

Ok, I am using JavaScript to control an image swap so that when someone clicks on the image, it changes to a “lit” version of the image. The code to do this within the link tag is onclick="changeto('wdl')" and I added onmouseover="changeto('wdl')" to the link so when you hover over it, it lights up as well.

Now, where the problem comes in, naturally, is when I added onmouseout="changeto('wdd')" which is the unlit version of the image. What happens here of course is when I hover over it, it lights up, when I move the cursor away it changes to the non lit version. But when you click on it it changes the image to the lit version as it should, but because of the onmouseout command, it changes to the unlit version.

What I want is to be able to hover on the image and have it light up. If you click it and move the mouse away it stays lit, but if you don’t click it and move the mouse away it stays on the “off” image.

Any help appreciated, I am stumped here. I was going to try to use some sort of if (!this) type of thing, but I honestly just don’t know.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I see two solutions:
    1. Declare separate CSS class for onclick event that is defined below wdd (or uses !important.
    2. Use a flag variable which is set to true in onclick and then tested in onmouseout:

    onclick="changeto('wdl');flag=true;" 
onmouseout="if (!flag) changeto('wdd')"

    Here is a simple example with CSS and Javascript:

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Example</title>
        <style>
            #whl {
                background: #e0e0ff;
                line-height: 150px;
                text-align: center;
                width: 150px;
            }
            #wdl {
                background: #e0ffe0;
                line-height: 150px;
                text-align: center;
                width: 150px;
            }
            #whl:hover {
                background: #ffcccc;
            }
            #wdl:hover {
                background: #ffcccc;
            }
            #whl.selected {
                background: #ffcccc;
            }
            #wdl.selected {
                background: #ffcccc;
            }
        </style>
        <script>
            function doClick(el) {
                document.getElementById("whl").className = document.getElementById("whl").className.replace( /(?:^|\s)selected(?!\S)/ , '' );
                document.getElementById("wdl").className = document.getElementById("wdl").className.replace( /(?:^|\s)selected(?!\S)/ , '' );
                el.className += "selected";
            }
        </script>
    </head>
    <body>
        <div id="whl" onclick="doClick(this);">WHL</div>
        <div id="wdl" onclick="doClick(this);">WDL</div>
    </body>
</html>

    It works with colours and in your case you will have to replace colours with background images (in the CSS).

    • 0