Установить цвет фона для элемента HTML?
есть ли способ установить цвет фона для HTML <area>
элемент? Я создаю карту изображений, на которой некоторые разделы карты будут всплывать всплывающие подсказки при наведении на них мыши, и я подумал, что было бы здорово (и удобно), если бы я мог установить цвет фона для <area>
элементы, чтобы вы могли видеть, где они расположены над изображением.
Я пробовал как цвет фона, так и границу, и ни один из них не имеет никакого эффекта -<area>
элементы остаются "невидимыми."Я предполагая, что это потому, что <area>
является самозакрывающимся тегом, и поэтому он на самом деле не имеет никаких размеров? Но форсирование высоты и ширины тоже не помогало.
6 ответов
Это кажется невозможным.
вы можете посмотреть в этот плагин jQuery:
http://plugins.jquery.com/project/maphilight
вот пример:
<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">