Применить css к AREA MAP

Я создал очень большую карту со множеством поли областей (более 20 координат каждый) для регионов внутри карты. Однако вы не можете добавить css в тег AREA, поскольку мне сказали, что это не видимый элемент. То, что я хочу сделать, - это когда пользователь наводится над областью на карте, я хочу, чтобы она была "выделена", применяя границу 1px к определенному элементу AREA. Есть ли способ сделать это? Нет, я не собираюсь использовать прямоугольники.

Ответы

Ответ 1

Если вы хотите использовать произвольные формы и по-прежнему использовать стили, считали ли вы, что пытаетесь выполнить SVG?

Я не мастер SVG, но вот пример, который я взбивал: http://jsfiddle.net/tZKuv/3/. Для производства вы можете захотеть заменить стандартный штрих на none, я использовал gray, чтобы вы могли видеть, где он находится.

Недостатком является то, что вы потеряете удобство использования области/карты дает вам, но я думаю, вы можете достичь своей цели, если вы идете по этому маршруту. Я добавил cursor: pointer в многоугольник, и вы можете добавить обработчики onclick для имитации href <area>.

Очевидным предостережением является поддержка браузера. Это похоже на работу в Chrome, и я уверен, что он должен работать в IE9 (jsfiddle не работает в IE9 на данный момент), но предыдущие версии IE не поддерживают SVG.

Обновление: сделана быстрая тестовая страница для тестирования IE9. Это действительно работает, как ожидалось. Здесь источник.

Обновить снова. Это также решит проблему масштабирования, о которой вы просили в другом вопросе.

Ответ 2

Невозможно с CSS.
Однако вы можете проверить плагин Map Hilight jQuery.

РЕДАКТИРОВАТЬ 10.2011
ImageMapster - это более свежий и более мощный плагин, который вы также должны проверить.

Ответ 3

Нет, нет способа сделать это, как вы описали. Я исследовал его и пытался. Что вы можете сделать, так это настроить события наведения мыши на разных сегментах и ​​заменить некоторое оверлейное изображение, которое затенено в той же области.