22

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?

graphicdivine
  • 10,937
  • 7
  • 33
  • 59
  • 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. – Sampson Dec 27 '09 at 04:00

5 Answers5

28

jQuery Plugin, MapHilight:

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

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>
Kukeltje
  • 12,223
  • 4
  • 24
  • 47
Sampson
  • 265,109
  • 74
  • 539
  • 565
  • 1
    How does that deliver the same results? Note the `shape="circle"` in the original post. – Josef Pfleger Dec 27 '09 at 09:30
  • Josef, functionally there won't be much difference for the end user. – Sampson Dec 27 '09 at 15:10
  • 2
    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;` – Kevin Peno Dec 29 '09 at 19:31
  • 1
    link is dead now, for anyone else finding this – Seiyria May 02 '17 at 18:27
  • 1
    no area tag. doesn't answer the question well enough. – Urasquirrel May 16 '19 at 01:24
16

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.

Shawn Steward
  • 6,773
  • 3
  • 24
  • 45
  • 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. – graphicdivine Dec 16 '09 at 09:25
  • This is the answer. – Urasquirrel May 16 '19 at 01:25
12

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.

Kevin Peno
  • 9,107
  • 1
  • 33
  • 56
3

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.

Aaronaught
  • 120,909
  • 25
  • 266
  • 342
3

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>