Установить цвет фона для HTML-элемента ‹area›?

Есть ли способ установить цвет фона для элемента HTML <area>? Я создаю карту изображений, на которой в определенных разделах карты появляется всплывающая подсказка, когда вы наводите на них курсор, и я подумал, что было бы круто (и удобно), если бы я мог установить цвет фона для элементов <area>, чтобы вы могли видеть где они были расположены над изображением.

Я пробовал и цвет фона, и границу, и ни один из них не дал никакого эффекта - <area> элементы остаются «невидимыми». Я предполагаю, что это потому, что <area> - это самозакрывающийся тег и поэтому на самом деле у него нет никаких размеров? Но форсирование высоты и ширины тоже не помогло.


person daGUY    schedule 11.08.2011    source источник


Ответы (6)


Вы можете использовать div(set postition:absolute) вместо площади

person irockman    schedule 11.08.2011
comment
Это помогло. Я просто использовал div вместо областей, а затем прикрепил свой плагин всплывающей подсказки к div. Работал как шарм. Спасибо! - person daGUY; 11.08.2011
comment
Как будет объявлен тег div в теге карты после этого изменения? вы можете вставить образец тега div? - person pri_dev; 26.02.2012
comment
Конечно, это потеряло бы преимущество использования тегов <map> и <area>, которые улучшают непрямоугольные формы для щелчка, наведения курсора и т. Д.? - person user56reinstatemonica8; 28.08.2013
comment
@ user568458: Именно поэтому вам нужно использовать и ‹area›, и ‹div› для определенных типов приложений ... - person Marcus; 20.12.2013
comment
Был бы признателен за пример. Как бы я ни ценил время, потраченное на ответ, ни одна из приведенных выше сведений не имеет смысла. У меня такая же проблема. Я хочу создать карту часовых поясов, раскрашивая часовые пояса на основе информации, хранящейся в базе данных. Если я не ошибаюсь, div прямоугольный, поэтому проблему не решит. Если я помещу область в div, тогда div изменит цвет, а область - нет. - person Peter; 22.03.2017

Это не кажется возможным.

Возможно, вы захотите изучить этот плагин jQuery:

http://plugins.jquery.com/project/maphilight

Вот пример:

http://davidlynch.org/js/maphilight/docs/demo_usa.html#

person Jason Gennaro    schedule 11.08.2011
comment
Ссылка на плагин не работает, просто перенаправляет на домашнюю страницу jQuery - лучшая ссылка, которую я могу найти, - это davidlynch.org/ projects / maphilight - похоже, что код работает, отрисовывая VML в Internet Explorer и HTML Canvas в современных браузерах. - person user56reinstatemonica8; 28.08.2013

Есть две библиотеки, которые предоставляют эту функцию. Оба работают одинаково, очень нетривиально - проверяя, поддерживает ли браузер Canvas, затем, если он поддерживает, рисует форму Canvas, а если нет (например, Internet Explorer), рисует VML.

  • Maphilight as mentioned above (link that works in 2013)
    • Also includes basic grouping
  • ImageMapster (jQuery plugin) which provides this plus other image map features:
    • Scaling image maps (e.g. for use with responsive images)
    • Переход к альтернативным изображениям в пределах области
    • Простые всплывающие подсказки и привязка событий со списками
    • Группировка

На сайте ImageMapster есть несколько неплохих демонстраций.

person user56reinstatemonica8    schedule 30.08.2013

Вы можете добавить заголовок, чтобы, когда кто-то наведет на него курсор, он узнал об этом.

Пример:

<area title="amazing" shape="rect" coords="0,0,82,126" alt="cool">
person ghost    schedule 28.09.2014

Вы можете присвоить базовому div идентификатор, а затем использовать javascript для изменения цвета фона div.

      <div id = "myDiv"></div>

и

      document.getElementById("myDiv").style.backgroundColor = "#FFFFFF";
person BlueMeanie    schedule 11.08.2011
comment
Это не работает. Это просто еще один способ применения стиля CSS к элементу. Стиль успешно применяется и отображается в inspect element / firebug, но не влияет на внешний вид. Также не устанавливается border, visibility: visible; display: block; и т. Д. - person user56reinstatemonica8; 28.08.2013

person    schedule
comment
Для этого требуется плагин maphilight ниже, упомянутый в ответе Джейсона Дженнаро - person user56reinstatemonica8; 28.08.2013