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

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

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

6 ответов


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


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

вы можете посмотреть в этот плагин jQuery:

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

вот пример:

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


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

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


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

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

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


вы можете дать базовому div идентификатор, а затем с помощью javascript, чтобы изменить цвет фона divs.

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

и

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

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

пример:

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