0

I'm using a HTML map, and I'd need to use pseudo-elements on its area to display badges, and to position them relatively.

Edit : I can't hard-code its coordinates because I'm going to deal with lots of area in a HTML I can't predict, as my code is injected of top of an existing HTML.

Here's a screen of my attempt, and what I'd like to do : enter image description here

Here's a fiddle (area on the first kitten's face)

tl;dr : Can I achieve this (by preference, in CSS only)?

What I tried

Problem, I've seen that area element is & needs to be set at display:none to work, preventing my pseudo-element to show.

So, I made it a block, it still have its position on the map (good) and my pseudo element appears, but not relative to the actual coordinates of the area...

Using this CSS :

area{
    display:block;
    position:relative;
}
area::after{
    display:block;
    content:"10";
    position:absolute;
    left:0px;
    top:0px;
    text-align:center;
    color:white;
    width:20px;
    height:20px;
    background-color:red;
    border-radius:20px;
    border:1px solid red;
}

I tried fiddling with margins, different positioning, different display, I didn't find the good combinaison yet.

I thought of retrieving coords of the area to position the pseudo-elements using CSS3's attr(), but I can't split the values of it afterward.

I've read this question about styling area using external (and old) jQuery plugins, but it doesn't feed my needs, and I can't find any clue on the web.

Does someone have an hint? I feel I'm close to it, but I'm running out of ideas.

Community
  • 1
  • 1
Maen
  • 10,603
  • 3
  • 45
  • 71
  • 1
    Why not create a div positioned relatively (with z-index) instead of an area and show your badge on that? – vogomatix May 23 '14 at 12:25
  • 1
    The problem lies in the fact that `area` is a replaced element much like `img`, so you can't really use `::before` and `::after` pseudo-elements with it. – BoltClock May 23 '14 at 12:29
  • 2
    @vogomatix: Presumably because it's unsemantic. Although yes, image maps are difficult to style with CSS in general, so it could work as a last resort. – BoltClock May 23 '14 at 12:29
  • I forgot to add that I'm looking for the lightest solution, meaning CSS only. I might use JS and create a div for each area, extract area's coordinates and position it well at the end. I omitted something important, I can't **hard-code any coordinates** because I'm going to deal with lots of area in a HTML I can't predict, as my code is injected of top of an existing HTML. (see edit) – Maen May 23 '14 at 12:41

1 Answers1

3

I thought 2 idea.

One: http://jsfiddle.net/F6jtg/2/

area{
    display:block;
    position: absolute;
    top: 40px; 
    left: 20px; 
    width: 100px; 
    height: 60px; 
}

Two: http://jsfiddle.net/F6jtg/3/

HTML

<area
  Shape="rect"
  coords="20,40,120,100"
  style="top: 40px; left: 20px; width: 100px; height: 60px;"
  alt="Kitten 1"
  href="#"></area>

CSS

area{
    display:block;
    position: absolute;
}
Maen
  • 10,603
  • 3
  • 45
  • 71
GeckoTang
  • 2,697
  • 1
  • 16
  • 18
  • They're not really two separate ideas, but it does look like a neat solution :-) – vogomatix May 23 '14 at 12:33
  • Sorry, I omitted an important information : I can't **hard-code any coordinates** because I'm going to deal with lots of area in a HTML I can't predict, as my code is injected of top of an existing HTML. – Maen May 23 '14 at 12:40
  • @vogomatix Yes. but in case of "Two", the area positioning is only on HTML. – GeckoTang May 23 '14 at 12:41
  • Yay! Second solution works well - I edited your answer, the coordinates were false: `area`'s coordinates are in form of `(x1,y1,x2,y2)`! – Maen May 23 '14 at 12:47