SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Map With Pop Ups And Links - How!

    Hi

    I have created this image map http://www.omegadm.co.uk/aureos.com/our-funds/

    If you rollover one of the areas of the map a box pops up with a text box and a link to another page.

    What I now need to do is when the user rolls over a region the same text box pops up, but it has a number of other links they can choose.

    I am really stuck on how to do this, does anyone have any suggestions on how I can achieve this? - Deadline looming!

    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You would basically use the same method that you would for a drop down menu as shown by the suckerfish menus.

    As IE can only hover on anchors you will need to use JS to get you the hover on a parent that holds a list of links.

    Something like this very old example.

    http://www.pmob.co.uk/temp/drop-down-image-replace2.htm

    Or this even older example:

    http://www.pmob.co.uk/temp/drop-down-image-replace.htm

  3. #3
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the response paul, but not sure how i would try and integrate that first example of yours into my current rollover map.

    i tried but now the rollover does not work

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Well it is working in a fashion but it is being over-ridden by all the other anchor styles for your existingpop up boxes.

    Just to show its working use this code:

    Code:
    li#africalarge{
        width:61px;
        height:56px;    
        background:transparent;
        border:none;
        padding:0;
        margin-left:-4px;
        margin-top:-5px;
    }
    #maplarge li{    position:relative;}
    li#africalarge ul{
        position:absolute;
        width:200px;
        background:#fff;
        left:-999em;
        top:50px;
        border:1px solid #000;
    }
    #maplarge ul a{width:auto;height:auto!important;background:none;}
    #maplarge li:hover ul,#maplarge li.over ul{left:0}
    That will show you that it will work but you need to clear out all the other styling as the new boxes will be in the above format instead. Prseently you have styles being redefined twice which is why nothing shows.

    It really is quite simple

  5. #5
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul

    Sort of got it working, it will have to do for now.

    I cant get any link colours to appear, the page in question http://www.omegadm.co.uk/aureos.com/our-funds/ using stylesheet map-funds.css for the map, if you rollover africa the box appears but the links appear to be in white.

    can you help me on this one?

    also the box appears in IE but the links dont display ?

    thanks

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    The text isn't showing because you have set it to be -1000em off the screen.

    Code:
    #mapfunds a {display: block; text-indent: -100em;color:#000;}
    Remove the indent and it will show.

  7. #7
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks paul, that was doing my head in!


Bookmarks

Posting Permissions

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