Image Map With Pop Ups And Links - How!

[mumford1]

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

[Paul O'B]

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

[mumford1]

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

[Paul O'B]

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:

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

[mumford1]

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

[Paul O'B]

HI,

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

#mapfunds a {display: block; text-indent: -100em;color:#000;}

Remove the indent and it will show.

[mumford1]

thanks paul, that was doing my head in!