onmouseout conflicting with onclick
Question
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.
2 answers
solution1
0 2012-04-05 02:01:48
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
solution2
0 ACCPTED 2012-04-05 02:02:01
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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.