If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    May 2013
    Member #
    I'm trying to create an interactive map, where users can hover the mouse over a certain area on my image, i`m popping something up, as in the example here:

    In this example, he has to calculate how many pixels for the margins...

    /* Now I have to set the position of the outer span in relation to the list item link */
    ul#cmp li a#cmp01:hover span.offset, ul#cmp li a#cmp01:active span.offset {
    margin-top : 0px;
    margin-left : 0px;

    Is there any way you can use margins measured from the top left corner of your image so that i don`t have to calculate the amount of pixels for each popupÉ


  3. #2
    Junior Member
    Join Date
    May 2013
    Member #
    Interesting..... I don't think it's only a CSS trick some js has to be used. try googling css+js hover image effect or similar keywords. you can achieve close to that effect in the example given with this. check here:

  4. #3
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Portland, OR
    Member #
    181 times
    No you can do it with just css. Just make 3 divs on top of each other with the content and put a display:none; on each. Then in on hover of the appropriate links put a display: block; which would make them appear and disappear separatly(in theory anyway, never actually tried anything like this)
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, it’s really how it works.
    -Steve Jobs

  5. #4
    Junior Member Arun@m6's Avatar
    Join Date
    May 2013
    Member #
    display: block;
    margin-top: auto;
    margin-left: auto;
    This will help you auto center the image.

Remove Ads

Posting Permissions

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

Search tags for this page

css interactive map

html css interactive map

interactive css map


interactive map css

interactive map with popup in css
interactive maps and popups css

interactive pop up html page


pop up html coding with css 3

web design google map popup
web design popup map
Click on a term to search for related topics.
All times are GMT -6. The time now is 08:51 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: