Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
06-11-2009, 02:07 PM #1
- Join Date
- Jun 2009
- Thanked 0 Times in 0 Posts
Onmouseover effect without swapping image?
I'm trying to get an ImageMap to work. I have one rather large image, containing different squares containing text. When I hover over a square I would like to have sort of a raised effect, like a button. I've done some research, and it would be possible to accomplish it with an onmouseover event where the image is swapped. But as I have a large image that is not a solution. I only need to have a square part of the large image to look like raised.
Is this possible using CSS, or do I have to look for other methods (like an Applet).
06-11-2009, 02:33 PM #2
This is how I would approach it:
Declare a div which contains your imagemap, and give it a position: relative. This means that any absolutely positioned divs within it will be relative to this div.
Create separate small image for each of the squares that are an active part of the imagemap. Set their display to 'none'. Position these absolutely within the same div as the imagemap, but with a slight displacement.
Set the onmouseover event for each of the active parts to set the display property of the superimposed image as 'block'. You may also need to set the focus to the imagemap to avoid flickering.
I will have a try and see what I can come up with.
06-11-2009, 05:42 PM #3
No, this doesn't work. Once the new image appears, the original loses focus and I can see no way to prevent this.
06-11-2009, 07:16 PM #4
- Join Date
- Jan 2009
- Thanked 92 Times in 91 Posts