Установить цвет фона в элементе HTML <area>?

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

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

Ответы

Ответ 1

u может использовать div(set postition:absolute) вместо области

Ответ 3

<script>
 $(function() 
 {
      $('.map').maphilight({
      fillColor: '008800'
 });
 var data = $('#id').data('maphilight') || {};

 data.alwaysOn = !data.alwaysOn;
 $('#id').data('maphilight', data).trigger('alwaysOn.maphilight');
 });

Ответ 4

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

  • Maphilight, как упоминалось выше (ссылка, которая работает в 2013 году)
    • Также включает базовую группировку
  • ImageMapster (плагин jQuery), который обеспечивает это и другие функции карты изображения:
    • Масштабирование карт изображений (например, для использования с отзывчивыми изображениями)
    • Переход на альтернативные изображения в пределах области
    • Легкие подсказки и привязка событий со списками
    • Группировка

Есть несколько хороших демо на сайте ImageMapster.

Ответ 5

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

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

и

      document.getElementById("myDiv").style.backgroundColor = "#FFFFFF";

Ответ 6

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

Пример:

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