Как вы Javascript стиль области элементов при наведении курсора?

Question

У меня есть карта изображения с 20 элементами области, только четыре показаны ниже. Я хочу стилизовать каждую область так, чтобы синяя рамка появлялась всякий раз, когда пользователь наводит на нее курсор - все формы области являются прямоугольниками.

<map id="mymap" name="mymap">
    <area shape="rect" coords="0,0,223,221" href="http://..." />
    <area shape="rect" coords="226,0,448,221" href="http://..." />
    <area shape="rect" coords="451,0,673,223" href="http://..." />
    <area shape="rect" coords="677,0,1122,223" href="http://..." />
    ...
</map>

---

Я пытался использовать CSS для стилизации каждой области, но это не работает. И я попытался поместить onmouseover=color() в элемент карты и вызвать следующую функцию, но, похоже, это тоже не работает:

function color() {
    var blueboxes = document.getElementsByTagName('area');
    for(var i=0; i<blueboxes.length; i++) {
        blueboxes[i].style.border = 'solid blue 5px';
    }
}

Answer 1

mapper.js может использоваться для этого.

Mapper.js 2.4 позволяет добавлять автоматическое выделение областей к картам изображений на ваших веб-страницах (включая экспорт в SVG). Он работает во всех основных браузерах - Mozilla Firefox 1.5+, Opera 9+, Safari и IE6 +. В старых браузерах он может использовать "jsgraphics" от Walter Zorn (если установлен), иначе он будет ухудшаться, и ваши посетители ничего не заметят.

Пример кода с этого сайта:

Обратите внимание, что все, что ниже этой строки, - это его код и формулировка, а не мое. Полная атрибуция принадлежит ссылке выше.

Настройка

Загрузите mapper.js и включите его в свою веб-страницу.

<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="mapper.js"></script>

"wz_jsgraphics.js" является собственностью Walter Zorn и не является частью дистрибутива!

Используя это

Чтобы получить выделение, просто добавьте class = "mapper" к изображению, окруженному div.

<div>
<img src="..." class="mapper" usemap="..." alt="...">
</div>

Чтобы получить выделение отдельных областей, добавьте в область один или несколько классов.

<map>
...
<area shape="poly" class="noborder icolor00ff00" href="#" coords="...">
...
</map>

Чтобы получить выбор нескольких областей, добавьте один или несколько идентификаторов к атрибуту областей.

<map>
...
<area shape="poly" id="blue" rel="green,red" href="#" coords="...">
<area shape="poly" id="green" rel="red,blue" href="#" coords="...">
<area shape="poly" id="red" rel="green,blue" href="#" coords="...">
...
</map>

Для форсирования группы областей с использованием атрибутов начальной области.

<map>
...
<area shape="rect" id="black" class="icolor000000 forcegroup" rel="green,red,blue" href="#" coords="...">
...
</map>

Answer 2

Тег области не может быть стилизован как обычный якорь.Я бы использовал другой подход.Вы можете применить свое изображение к элементу div как фоновое изображение, а затем расположить кликабельные элементы над элементом div, используя position: absolute.

Взгляните на эту технику: http://www.alistapart.com/articles/cssmaps/

Answer 3

Обычно подход, который я вижу, состоит в том, чтобы создать саму карту изображений из разных изображений в CSS.Вот хороший пример этого:

http://ago.tanfa.co.uk/css/examples/europe-map.html

Answer 4

Может Рафаэль помогает?

Посмотрите на этот образец :)