CSS based Image Map

**ellomoto** · 05-03-2007, 07:54 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:

Code:

<!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>

**LadynRed** · 05-03-2007, 03:49 PM

I think you're going to need some javascript to capture the onClick event and then tell it what to leave visible.

**ellomoto** · 05-04-2007, 07:09 AM

Yes I would agree with you...something that I was trying to avoid but don't see how that is going to possible. Thanks for your reply. I will post back with my attempt.