7 replies [Last post]
michalz
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2006-01-20
Posts: 5
Points: 0

I have a different problem with Image map. Every articles and examples, which I've seen in the Internet are adjusted with "hover" style. For example here:
http://frankmanno.com/ideas/css-imagemap/index_js.html
or here:
http://evan.nixsys.bz/note/

I would like to make a legend first. I mean: a menu with links to the image beside. If you click on the link, then you will see a info text on the map. It'd be great if <div>s with the legend (text links) and with the image map were separated.
Does anyone know how to create this?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 35 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Legend &amp; map

Just reverse the image map idea. When the link is hovered/clicked, you'll reveal another element, that element will be positioned in such a way that it will appear over the image.

michalz
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2006-01-20
Posts: 5
Points: 0

Legend &amp; map

Chris..S wrote:
Just reverse the image map idea.

cold you help with this reverse, please? Smile

anyway, I can't / don't know how set positions for each .element. Also: how to separate div with legend and div with image? Is there better solution for my "problem"?

html:

<div id="menu">
<a href="#">Element1<em><div class="element1"></div></em></a>
<br><br>
<a href="#">Element2<em><div class="element2"></div></em></a>
</div>
</div>

css file:

#menu { left:0%; width:100%; height:100%; background:url(map.gif) no-repeat; background-position:150 0; position:absolute;}  
.element1 {width:10px; height:10px; background:url(dot.gif) no-repeat;}
.element2 {width:10px; height:10px; background:url(dot.gif) no-repeat;}
em {font-style:normal;}

#menu a:visited, #menu a {text-decoration:none; color:#c00; z-index:10;}
#menu a:hover {background:transparent;}
#menu a em, #menu a:visited em {display:none;}
#menu a:active, #menu a:focus {background: #fff; z-index:10;}
#menu a:active em, #menu a:focus em {display:block; position:absolute; left:40%; background: transparent; overflow: auto;}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 35 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Legend &amp; map

Take a look at this picture gallery by Stu Nicholls.

Strangely, it does what you want - but with images.

Image the thumbnails as links. The large images as positioned text with a transparent background. The "Stu's Photograph Gallery Mk2" camera background as the image over which you want your positioned text to appear.

Do you understand the use of position:relative to set the display/positioning context for a nested position:absolute. If not read up on them.

Where the links are is next to irrelevant, as long as the text/images that they make appear are positioned absolutely in the same reference frame (positioning context) as the image over which you want those text/images to appear.

michalz
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2006-01-20
Posts: 5
Points: 0

Legend &amp; map

Hi! Almost everything is done, but I have a problem with IE. In Firefox this map&legend looks good, but IE isn't recognizing overflow in #menu or a position in "a.menu:hover span[...]" with dot.gif. How can I fix this?

<div id="map">
<div id="menu">
<a class="test1 menu" href="#map">Test1<span></span></a><br>
<a class="test2 menu" href="#map">Test2<span></span></a><br>
<br><br><br><br>
<br><br><br><br>
</div>
</div>

css
#map {position:absolute; width:100%; height:100%; background:url(map.gif) 175px 0px no-repeat;}
#menu {width:150px; height:115px; background:black; overflow:auto; border:1px solid #aaa;}

a.test1:hover span,a.test1:focus span {top:469px; left:370px;}
a.test2:hover span,a.test2:focus span {top:169px; left:570px;}

a.menu,a.menu:visited {color:yellow; padding:2px; text-decoration:none;}
a.menu:focus,a.menu:active {background:grey;}
a.menu span {visibility:hidden;}
a.menu:hover img,a.menu:active img,a.menu:focus img {border:0; background:transparent;}
a.menu:hover span,a.menu:active span,a.menu:focus span{
	visibility:visible; position:fixed; width:14px; height:15px; background:url(dot.gif) no-repeat; display:block; display:left;
	}

michalz
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2006-01-20
Posts: 5
Points: 0

Legend &amp; map

Well, is this a real IE bug? Is there any way to improve my css?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 35 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Legend &amp; map

A link would make things easier.

IE doesn't recognised position: fixed. Why do you need that?

michalz
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2006-01-20
Posts: 5
Points: 0

Legend &amp; map

because of overflow in #menu IE shows visible dot.gif in div=menu, and not in parent div=map or in relation to whole site. Only with firefox it works fine.