use javascript onmouseover to trigger hover state of another image

E

Elisa

I have two images, each with defined CSS hover states. I would like a
mouseover on one image to trigger the hover state of the other image.
Is this possible using javascript? If so, how?

Any help would be appreciated.

Thanks,
CJ
 
G

Grant Wagner

Elisa said:
I have two images, each with defined CSS hover states. I would like a
mouseover on one image to trigger the hover state of the other image.
Is this possible using javascript? If so, how?

Any help would be appreciated.

Thanks,
CJ

This isn't the most eloquent solution, but it should work, as long as you
create a CSS class for each image id you want to provide this
functionality for:

<head>
<style type="text/css">
img#one:hover, img.one {
border: 4px solid Blue;
}
img#two:hover, img.two {
border: 4px solid Red;
}
</style>
<script type="text/javascript">
function setHover(id, state) {
if (document.getElementById) {
var otherImage = document.getElementById(id);
if (otherImage && typeof otherImage.className == 'string') {
otherImage.className = (state ? id : '');
}
}
}
</script>
</head>
<body>
<img
src="image1.jpg" id="one"
onmouseover="setHover('two', true);"
onmouseout="setHover('two', false);"<img src="image2.jpg" id="two"
onmouseover="setHover('one', true);"
onmouseout="setHover('one', false);"</body>

I'm not sure there's any way to programmatically invoke the :hover psuedo
class.

--
| Grant Wagner <[email protected]>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-developer/upgrade_2.html
 
T

Thomas 'PointedEars' Lahn

Elisa said:
I have two images, each with defined CSS hover states.
I would like a mouseover on one image to trigger the hover
state of the other image. Is this possible using javascript?

Yes, see <http://pointedears.de/scripts/test/hoverMe/>

You need to modify it a bit to use the "className" property
(which I assume you mean by "CSS hover states") but if you
then use the name of the second image in the event handler
of the parent link of the first one and vice-versa, it should
work.


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top