css and image maps

[doozer77]

I have an image which has certain hotspots on it defined by image maps. I want text to appear when a user rolls over it the way one does with "a:hover span". However, this html code

<map name="Map">
<area shape="rect" coords="148,10,207,26" href="#">
</map>

contains no "a" tag and so I can't apply a hover rule (it needs to work in MSIE). Is there any way to have text be hidden by default but appear when a user hovers over the image map?

[Mobull]

Not sure if that is what you mean but I think you could use onMouseOver to succeed.

thus something like:
<area shape"rect" coords="10,20,80,60" href="#" onMouseOver="yourActionsHere">

Of course "yourActionsHere" holds the actions you want to achieve (like a custum function "showHideLayer()" which shows a layer with text if you place your mouse over that part of the image). You'll have to find that show/hide script here on webmasterworld. I'm sure they have been posted many times before.

[bruhaha]

Could you clarify two things:

1) Are the hotspots of your image map simply the spots where you wish the text to appear or are they something additional? (Can you show us a snip of the code with the hotspots defined?)

2) Forgetting the imagemap for a moment, what code do you use to make your text visible only on "hover"?

There are ways to create a "CSS imagemap" which use your "map" image as the background to a div in which you position anchors that you can make appear on hover. With minor adaptation they could be made to do what you're after.

[doozer77]

The hotspots of the image map are the areas which define links.

e.g.
<map name="Map">
<area shape="rect" coords="148,10,207,26" href="#">
</map>

So in the above code, the coordinates turn part of the image into a link.

Normally (meaning before I had to use image maps) I coded everything in css and used a:hover span {display:block;} (with the text to be displayed on hover inside the span tags)

e.g.
<div id="link">
<p class="theatre"><a href="#">Name<span style="top:-155px;left:272px>text to display on hover</span></a>
</p>
</div>

In the above code the word "Name" is what's displayed as a link and when a user rolls over it the hover text displays elsewhere on the page.

The problem is, now that the href="#" is in an "area" tag instead of an "a" tag I can't seem to apply any hover rules. Is there a way of applying a hover rule to this? I don't javascript so it won't help me much.

[createErrorMsg]

the href="#" is in an "area" tag instead of an "a" tag I can't seem to apply any hover rules. Is there a way of applying a hover rule to this?

In IE browsers with javascript, yes.
In non-IE browsers without javascript, yes.
In IE browsers without javascript. Sorry, but no.

cEM

[added]
Correction. Depending upon what you mean, exactly, when you say "I don't javascript," there could be a solution.
If you mean, "I refuse to use javascript on my pages," then the answer remains no. If, instead, you mean, "I am not a javascript programmer and therefor cannot write the JS code I would need," then one (perhaps the only) answer liews with Dean Edwards' IE7 [dean.edwards.name]. It's an easily installed JS script (it installs on your site and runs on any JS-enabled browser that visits your pages) that "enables" better CSS support in IE browsers. One of the things it "fixes" is IE hover support on non-anchor elements, which should allow you to apply a :hover effect to the <area> tag.
[/added]

[Robin_reala]

You might also like to look at whatever:hover [xs4all.nl] - it does the same thing as IE7 but in a smaller package.

[bruhaha]

If I've understood what you're after --an image map on which the "hotspots", when hovered over, reveal text but without any active links-- you can, in fact, use "a:hover" and create a purely CSS "imagemap" by doing something like this:

STYLE (in the head):

#map {width:300px; height:250px; background: #fff url(images/map.gif); position:relative; }

#map a {color:#00f; font: bold 15px Verdana; text-decoration:none;background:transparent;
display:block; width: 60px; height:0; padding-top:10px; position:absolute; overflow:hidden; }

#map a:hover {overflow:visible; }

a#first {left:20px; top:15px; }
a#second {left:45px; top:70px;}
a#third {left:110px; top:90px; }
a#fourth {left:130px; top:140px;}
a#fifth {left:210px; top:80px;}

HTML:

<div id="map">
<a id="first" title="First" href="#none">First</a>
<a id="second" title="Second" href="javascript:;">Second</a>
<a id="third" title="Third" href="javascript:;">Third</a>
<a id="fourth" title="Fourth" href="javascript:;">Fourth</a>
<a id="fifth" title="Fifth" href="javascript:;">Fifth</a>
</div>

The inclusion of padding and alternating between "hidden" and "visible" for the overflow is the key.

Note that there are two options for href here (I've included an example of each): a javascript call that doesn't do anything and an anchor "#none" that doesn't actually exist so won't change your location.

(This is a simple version. You can also vary the size of the area for each anchor and, if you wish, cause the chosen part of the map to change [e.g. to a 'highlighted' version of that part of the image] by adding a different background for the hover state of that anchor....)

[D_Blackwell]

For me, not being dependent upon Javascript for functionality is a key advantage of whatever:hover . Also, I can design as I please for Firefox etc., not worrying all too much about IE since it will come along for the ride.

[vicksm]

I am also tackling exactly the same issue as doozer77, in that I also usually use CSS for creating pop ups (as in Eric Meyer's pure css pop ups), and am now needing to for an image map without javascript (I'm a javascript dummy and also would prefer to do it entirely in css if possible).

I'm working on a real estate project and am producing a site map of lots available, so when someone hovers over a particular lot, they should see brief information about that lot (appearing in the same place on the page no matter which lot they are hovering over). If they click on the lot, it takes them to a different page.

Bruhaha's solution seems intriguing, but it's missing the mark for me as the text appears on the actual 'hotspot'. I'm playing around with it now to see if I've missed a trick, but was wondering if doozer77 had come up with a solution, or if anyone else has any ideas...?