3

I have a <map> whose background CSS property is set to a 400x400 image.

It has a number of <area> regions, each of which points to some URL:

   <map ...>
     <area shape="rect" coords="5, 5, 10, 10"   href="http://example.com/1">
     <area shape="rect" coords="10, 20, 20, 30" href="http://example.com/2">
     ...
   </map>

I would like to color some of the areas with a solid fill color so that they obscure the background image. I had assumed the <area> would have a background, but this doesn't seem to work:

   <map ...>
     <!-- Adding `style="background-color: red"` has no effect. -->
     <area shape="rect" coords="5, 5, 10, 10"   href="http://example.com/1"
       style="background-color: red">

     <area shape="rect" coords="10, 20, 20, 30" href="http://example.com/2">
     ...
   </map>

Is there a way to do this with CSS?

Edit: There are existing but not identical questions whose answers take a stab at this, but they either require using jQuery or don't use valid HTML. I'm asking for a CSS-based solution, if one exists.

John Feminella
  • 303,634
  • 46
  • 339
  • 357
  • From what I understand, no. However, check this out for an alternate method --> http://stackoverflow.com/questions/7019947/set-a-background-color-on-the-html-area-element – SRing Apr 16 '15 at 19:16
  • @SRing Hmm -- that answer doesn't seem like it's valid HTML, since the author recommends `div(set postition: [sic] absolute)`, and it's not at all clear to me what that means or where the `div` goes in relation to your `area`. – John Feminella Apr 16 '15 at 19:19
  • The solution presented is to replace your `` with a `
    ` and then use css positioning to mimic the location of your ``. This way you can style your `
    ` as you want. However, I would look at the jQuery solutions below the accepted answer for something a bit more elegant (as the `
    ` solution loses the benefits `` and ``afford. I was looking at this answer --> http://stackoverflow.com/a/18536566/4126804
     – SRing Apr 16 '15 at 19:25
  • @SRing: Thanks for the suggestion. I'll take another stab at it, but I'm really looking for solutions that only involve CSS and HTML; I'm hoping not add a dependency to my whole site just for the sake of this one thing. – John Feminella Apr 17 '15 at 00:30
  • Another option... http://stackoverflow.com/a/5026595/1663001 – DavidG Apr 17 '15 at 00:45
  • @DavidG: Using SVG hadn't occurred to me -- that's definitely a good alternative. I'll try that out! – John Feminella Apr 17 '15 at 00:52

1 Answers1

0

I sort it out by making an <a> with display=block and specs. I've just tried to add a inline CSS for bg-color and it worked. It'll be linked (at least so far) but it'll do the job with only HTML CSS.

Jamal
  • 763
  • 7
  • 22
  • 32
João Imai
  • 1