Поместите псевдоэлемент в область карты HTML ›

Я использую HTML map, и мне нужно использовать псевдоэлементы на его area для отображения значков и их относительного позиционирования.

Редактировать: я не могу жестко закодировать его координаты, потому что я собираюсь иметь дело с большим количеством областей в HTML, которые я не могу предсказать, поскольку мой код вводится поверх существующего HTML.

Вот скрин моей попытки и что я хотел бы сделать: введите здесь описание изображения

Вот скрипка (область на мордочке первого котенка)

tl;dr: Могу ли я добиться этого (по желанию, только в CSS)?

Что я пробовал

Проблема, я видел, что элемент area должен быть установлен на display:none для работы, что препятствует отображению моего псевдоэлемента.

Итак, я сделал его блоком, он все еще имеет свое положение на карте (хорошо), и мой псевдоэлемент появляется, но не относительно реальных координат области...

Используя этот 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;
}

Я пробовал возиться с полями, другим позиционированием, другим дисплеем, но пока не нашел подходящей комбинации.

Я подумал о том, чтобы получить coords области для позиционирования псевдоэлементов с помощью attr() CSS3, но впоследствии я не могу разделить ее значения.

Я прочитал этот вопрос о стиле area с использованием внешних (и старых) плагинов jQuery, но это не соответствует моим потребностям, и я не могу найти подсказку в Интернете.

У кого-нибудь есть подсказка? Я чувствую, что близок к этому, но у меня заканчиваются идеи.


html css pseudo-element
person Bigood    schedule 23.05.2014    source источник
comment
Почему бы не создать div, расположенный относительно (с z-индексом) вместо области, и показать на нем свой значок?   -  person vogomatix    schedule 23.05.2014
comment
Проблема заключается в том, что area является заменяемым элементом, очень похожим на img, поэтому вы не можете использовать с ним псевдоэлементы ::before и ::after.   -  person BoltClock    schedule 23.05.2014
comment
@vogomatix: предположительно, потому что это не имеет смысла. Хотя да, карты изображений сложно стилизовать с помощью CSS в целом, поэтому это может работать в крайнем случае.   -  person BoltClock    schedule 23.05.2014
comment
Я забыл добавить, что ищу самое легкое решение, то есть только CSS. Я мог бы использовать JS и создать div для каждой области, извлечь координаты области и расположить ее в конце. Я пропустил что-то важное, я не могу жестко закодировать какие-либо координаты, потому что я буду иметь дело с большим количеством областей в HTML, которые я не могу предсказать, так как мой код вводится поверх существующий HTML. (см. редактирование)   -  person Bigood    schedule 23.05.2014

Ответы (1)


arrow_upward
3
arrow_downward

Я думал 2 идея.

Один: http://jsfiddle.net/F6jtg/2/

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

Два: 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;
}
person GeckoTang    schedule 23.05.2014
comment
На самом деле это не две отдельные идеи, но это выглядит как изящное решение :-) - person vogomatix; 23.05.2014
comment
Извините, я пропустил важную информацию: я не могу жестко закодировать какие-либо координаты, потому что я буду иметь дело с большим количеством областей в HTML, которые я не могу предсказать, так как мой код вставляется из поверх существующего HTML. - person Bigood; 23.05.2014
comment
@vogomatix Да. но в случае Two позиционирование области осуществляется только в HTML. - person GeckoTang; 23.05.2014
comment
Ура! Второе решение работает хорошо - я отредактировал ваш ответ, координаты были ложными: координаты area имеют форму (x1,y1,x2,y2)! - person Bigood; 23.05.2014