onmouseout conflicting with onclick - 【StackMirror】|javascript|html|onmouseout

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.

2012-04-05 01:56
by Corbin Holbert

Some example code may greatly assist in giving the answer you are looking for - Ilia Frenkel 2012-04-05 02:03

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).

2012-04-05 02:02
by Ilia Frenkel

Yes. Declare a global variable flag and set it to false initially. It is a bad practise, but without the code I can't really suggest anything better - Ilia Frenkel 2012-04-05 03:05

I looked through your code and I couldn't find an obvious solution. I would go with @josnidhin solution - using different CSS classes and Javascript for clicks, but this will require rewriting substantial part of your page - Ilia Frenkel 2012-04-05 04:01

Always welcome :- - Ilia Frenkel 2012-04-05 05:52

Now that I am actually attempting to put this in to my coding, does this do the onclick as well? What does the .selected do if I may ask? Since I have to do this for all three of those slider buttons I just want to understand what is happening so I do it right : - Corbin Holbert 2012-04-05 06:03

First, for every element you declare two CSS classes - regular one and :hover one. That way you will have nice transitions when user moves the mouse over. Next, you declare selected CSS class for an element that user clicks on. What the Javascript code does is basically removes selected class from all the elements and then adds it to the one that was clicked. It is important that selected be declared AFTER all the other. Does it make sense - Ilia Frenkel 2012-04-05 06:08

Yes. As I said, it will require some changes - Ilia Frenkel 2012-04-05 06:22

Ok, one more bump in the road, if you go to www.djcproductions.net, it works for the clicking but not the hovering, but if you got to www.djcproductions.net/test.html, it works completely, I literally copy and pasted from test.html to my index.html- any thoughts as to why it works in one and not the other? I even loaded them both up in dreamweaver into live mode where they both worked, but in a browser, only test.html works - Corbin Holbert 2012-04-05 07:30

You should use a combination of CSS and javascript. Look up css hover to achieve the mouseover function and do the click part from js

CSS Hover on w3schools http://www.w3schools.com/cssref/sel_hover.asp

2012-04-05 02:01
by Josnidhin