Visible Area tag?

How do I make an html < area /> visible at all times, not just on focus?

Seems it should be as simple as this:

html:

<img src="image.png" width="100" height="100" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="50,50,50" href="#" alt="circle" />
</map>

css:

area {border: 1px solid red}

No matter what I do, it seems I cannot affect the styling of an area at all, it genuinely appears immune to css. Any ideas? Also, any other examples of un-style-able tags?

Solution 1:

jQuery Plugin, MapHilight:

You might find the jQuery plugin MapHilight (dead link!!!) to be of interest here.

Map of the United States Demo (dead link!!!)

New link: https://github.com/kemayo/maphilight

New demo: https://home.ctw.utwente.nl/slootenvanf/wp-content/uploads/examples/archive/jquery_plugins/imagemap/

HTML/CSS Alternative

I would suggest using a div, with absolute links within. The reason being, this will degrade very nicely and show all of the options as a list of links. Image maps won't be so friendly. Furthermore, this alternative will deliver the same results, with cleaner and more modern practices.

#myImage {
  position:relative; width:640px; height:100px; 
  background-image:url("bkg.jpg");
}
a.apples {
  display:block; position:absolute; 
  top:0; left:0; width:100px; height:100px;
  border:1px solid red;
}
a.taters {
  display:block; position:absolute;
  top:0; left:200px; width:25px; height:25px;
  border:1px dotted orange;
}
#myImage a span {
  display:none;
}

<div id="myImage">
  <ul>
    <li><a href="page1.html" class="apples"><span>Apples</span></a></li>
    <li><a href="page2.html" class="taters"><span>Taters</span></a></li>
  </ul>
</div>

Solution 2:

The area tag just defines space in which the user can click, there is no visual representation of it so you can't really use CSS to style it. I like where you're headed but unfortunately you will probably need to use javascript to overlay a transparent image over the top of your image map to accomplish what you're trying to do.

Solution 3:

So your question hit home for me. I'd love to be able to do something similar using area tags to get nice little "shapes" other than square for areas of interest. So I did a little research and here's what I found:

http://www.netzgesta.de/mapper/

Doesn't look like it will 100% do what you want, but maybe it is a starting point.

Solution 4:

If only it were so easy.

If you want to draw simple shapes, you might be able to get there using the HTML <canvas> element, which is what libraries like flot use (IE requires the excanvas emulator).

It'll still require a fair amount of Javascript, but it might be easier/more effective than messing around with overlay images, especially if the sizes of your shapes aren't static. There's a pretty good tutorial here.