Register

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
    Posts
    1
    Member #
    36254
    Hi,
    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:

    http://green-beast.com/experiments/css_map_pop.php

    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É

  2.  

  3. #2
    Junior Member
    Join Date
    May 2013
    Posts
    11
    Member #
    36185
    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: http://cssdemos.tupence.co.uk/image-popup.htm

  4. #3
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    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
    Location
    India
    Posts
    7
    Member #
    36402
    Code:
    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 05:37 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com