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