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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Popup photo on mouseover

    Best way to describe what I'm looking for is to be specifc. I have a page with an overhead drawing of a datacenter with a grid and blocks representing individual racks. What I would like is for a user to be able to hover over one of these blocks and have a photo pop up showing a closeup of the rack. Of course, when they mouseout it should disappear. I've had some experience using mouseover and mouseout commands for left side navigation, but can't figure out how to do it with a large image and imagemaps, etc. Any assistance would be greatly appreciated. Thanks.

  • #2
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    I don't think you can do that with image maps.

    However you could position a div over an area of your image and associate onmouseover and nomouseout events with with the div.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    16
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Image maps are really not a good route to achieve what you're trying to do. This post pretty much covers the reasons why.

    However, if you still would like to do it that way - you could maybe adapt what this guy has done.


  •  

    Posting Permissions

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