Visible Area tag?

Question

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?

Tramel

I've provided an alternative solution that degrades gracefully, and should offer the same visual representation with the potential of further modification if desired in the future. – Specialism

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

Specialism

How does that deliver the same results? Note the shape="circle" in the original post. – Bromine

Josef, functionally there won't be much difference for the end user. – Specialism

It may not make a difference to the end user, but if it is a project requirement then shape="circle" matters doesn't it? Also, you should not use display:none; on items that might be useful for screen readers. Instead use position: absolute; visibility:hidden;. This will cause the element to break from flow, preventing it from breaking layout, and not be seen, except by screen readers that ignore things hidden by display:none; – Reticent

link is dead now, for anyone else finding this – India

no area tag. doesn't answer the question well enough. – Pity

Answer 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.

Kaz

Thanks for the answer, I'll try the javascript/image route. Frustratingly, there is some visual representation of the area, by default most browsers will render a dotted outline on focus, but this is also, apparently, immutable. – Tramel

This is the answer. – Pity

Answer 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.

Reticent

Answer 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.

Hadwin

Answer 5

There is another option. You can write an SVG. Then you can see the shape by setting fill:green; fill-opacity: 1;

<svg height="300" width="200">
  <a xlink:href="http://stackoverflow.com/">
    <ellipse cx="100" cy="150" rx="100" ry="150" style="fill:white; stroke:none;fill-opacity: 0" />
  </a>
</svg>

Mcpeak

This is also useful because it allows scaling with the image. – Crinkle