PDA

Click to See Complete Forum and Search --> : CSS based Image Map

ellomoto
05-03-2007, 09:06 AM
Hello ppl

I need some help with an image map that im trying to create. I have the map working to the example here however i would like the information to stay available when the user clicks on a hotspot not to disappear when they are not hovered over. I have tried a:active and a:link however this doesnt seem to produce the desired effect. I hope that makes sense. Any help would be appreciated. Cheers

Here is my code up to now:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
#imap {display:block; width:388px; height:383px; background: url(move.gif) no-repeat; position:relative; margin:10px 0 10px 75px;}

#imap a#image {display:block; width:388px; height:0; padding-top:383px; overflow:hidden; position:absolute; left:0; top:0; cursor:default;}

* html #imap a#image {height:383px; he\ight:0;}

body{font-family:verdana;}

#imap a#image:hover {background-position: 0 0; z-index:10;}

#imap dd {position:absolute; padding:0; margin:0; left:138px; top:257px; width:119px; height:102px;}

dd#one{ position:absolute; padding:0; margin:0; left: 69px; top: 111px; width: 71px; height: 86px;}
dd#two{ position:absolute; padding:0; margin:0; left: 69px; top: 111px; width: 151px; height: 94px;}
dd#three{position:absolute; padding:0; margin:0; left: 69px; top: 111px; width: 185px; height: 136px;}
dd#four{position:absolute; padding:0; margin:0; left:69px; top:111px; width:92px; height:141px;}
dd#five{position:absolute; padding:0; margin:0; left:69px; top:111px; width:50px;}
dd#six{position:absolute; padding:0; margin:0; left:69px; top:111px; width:113px;}

#imap #one {left:46px; top:240px; z-index:20;}
#imap #two {left:207px; top:159px; z-index:20;}
#imap #three {left:193px; top:10px; z-index:20;}
#imap #four {left:86px; top:80px; z-index:20;}
#imap #five {left:17px; top:172px; z-index:20;}
#imap #six {left:129px; top:255px; z-index:20;}

#imap a#link_one {display:block; width:100%; height:100%; text-decoration:none; z-index:20;}
#imap a#link_two {display:block; width:100%; height:100%; text-decoration:none; z-index:20;}
#imap a#link_three {display:block; width:100%; height:100%; text-decoration:none; z-index:20;}
#imap a#link_four {display:block; width:100%; height:100%; text-decoration:none; z-index:20;}
#imap a#link_five {display:block; width:100%; height:100%; text-decoration:none; z-index:20;}
#imap a#link_six {display:block; width:100%; height:100%; text-decoration:none; z-index:20;}

#imap a em {display:block;}

#imap a span, #imap a:visited span {display:none;}

#imap a:hover span {position:absolute; display:block; color:#000; width:330px; height:270px; line-height:1.8em; font-size:0.9em; text-align:justify;}

#imap a#link_one:hover span {left:250px; top:-90px;}
#imap a#link_one:hover em {position:absolute; display:block; left:150px; top:95px; width:80px; height:1px; overflow:auto; font-size:1px; background:#f00;}

#imap a#link_two:hover span {left:250px; top:-160px;}
#imap a#link_two:hover em {position:absolute; display:block; left:150px; top:35px; width:80px; height:1px; overflow:auto; font-size:1px; background:#f00;}

#imap a#link_three:hover span {left:250px; top:-10px;}
#imap a#link_three:hover em {position:absolute; display:block; left:150px; top:90px; width:80px; height:1px; overflow:auto; font-size:1px; background:#f00;}

#imap a#link_four:hover span {left:370px; top:-80px;}
#imap a#link_four:hover em {position:absolute; display:block; left:150px; top:35px; width:80px; height:1px; overflow:auto; font-size:1px; background:#f00;}

#imap a#link_five:hover span {left:250px; top:-50px;}
#imap a#link_five:hover em {position:absolute; display:block; left:150px; top:35px; width:80px; height:1px; overflow:auto; font-size:1px; background:#f00;}

#imap a#link_six:hover span {left:250px; top:-50px;}
#imap a#link_six:hover em {position:absolute; display:block; left:150px; top:35px; width:80px; height:1px; overflow:auto; font-size:1px; background:#f00;}

#imap a:hover span img {float:left; margin-right:1em; margin-bottom:0.5em; border:1px solid #000;}

#imap a span:first-line {font-weight:bold; font-style:italic;}

#info h3 {margin:0 0 0 75px; font-weight:normal; letter-spacing:0.1em; padding-bottom:5px; border-bottom:1px solid #aaa; width:650px;}

#info .para {width:300px; margin:0 0 0 75px;}

</style>
</head>
<body>
<div id="info">
<h2>&nbsp;</h2>
<h3>Universities and Colleges</h3>
<dl id="imap">
<dt><a id="image" href="#nogo" title="Region">MOVE Regions</a></dt>
<dd id="one"><a id="link_one" title="Hertfordshire" href="#nogo"><em></em><span>Hertfordshire</span></a></dd>
<dd id="two"><a id="link_two" title="Cambridgeshire" href="#nogo"><em></em><span>Cambridgeshire</span></a></dd>
<dd id="three"><a id="link_three" title="East of England Region" href="#nogo"><em></em><span>East of England Region</span></a></dd>
<dd id="four"><a id="link_four" title="Bedfordshire" href="#nogo"><em></em><span>Bedfordshire</span></a></dd>
<dd id="five"><a id="link_five" title="Essex" href="#nogo"><em></em><span>Essex</span></a></dd>
<dd id="six"><a id="link_six" title="East Anglia" href="#nogo"><em></em><span>East Anglia</span></a></dd>
</dl>
</div>
</body>
</html>
ray326
05-03-2007, 09:20 AM
Do you mean the title text? Can't be done. For another tactic you could use a:visited.
ellomoto
05-03-2007, 09:29 AM
No not the title text, the information within the span. I'm following this example (http://www.cssplay.co.uk/menu/old_master.html) however instead of the information disappearing when leaving the hotspot I would like to get information to stay untill I move to another hotspot. Is this possible with just CSS?
ray326
05-03-2007, 11:03 AM
I doubt it but try playing with a:visited span {...}.