473,320 Members | 1,857 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

use javascript onmouseover to trigger hover state of another image

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
Jul 23 '05 #1
2 3040
Elisa wrote:
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 <gw*****@agricoreunited.com>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/...ce/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/a...ence_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-deve...upgrade_2.html
Jul 23 '05 #2
Elisa wrote:
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
Jul 23 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: JesusFreak | last post by:
From: us_traveller@yahoo.com (JesusFreak) Newsgroups: microsoft.public.scripting.jscript Subject: toolbar script problem NNTP-Posting-Host: 192.92.126.136 Recently, I downloaded the following...
2
by: Kevin Lyons | last post by:
Hello, Can anyone assist me with what I am trying to do with the following code (six different scenarios to try to make the functionality work correctly)? I want to always (and ONLY) display...
8
by: chrisdude911 | last post by:
how do i add video into a javascript web page with my own custom buttons?
7
by: Helmut Giese | last post by:
Hello out there, I know that I can replace an image with another using e.g. onMouseOver="swapIn(...)" and onMouseOut="swapOut(...)" Is there anything I can do if Javascript is disabled? - I...
1
by: Ciuin | last post by:
Again I need your help. This is the test page I am working on: http://www.manfredkooistra.de/zeugs/test/test.php Description: The page shows a centered image and a navigation menue...
1
by: willCrain | last post by:
I am pretty much stuck and dont know which direction to procede in figuring this out. My desired end result is to have top_home button and bottom_home button to be on opposite areas of the page, but...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.