Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Onmouseover effect without swapping image?

    Hi,

    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).

    Macamba

  • #2
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    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.

    Much of this can be done with CSS, but the anti-flickering will need javascript.

    I will have a try and see what I can come up with.

    John

  • #3
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    No, this doesn't work. Once the new image appears, the original loses focus and I can see no way to prevent this.

    John

  • #4
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    The idea found here should work: CSS Image Rollover Map

    You can get an idea how it's done by looking at the Europe GIF Image


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •