Эффекты наведения на неправильные многоугольники в CSS

Question

Мне интересно, как делать разметку и кодировать эффекты наведения для карты, подобной этому изображению .

Когда каждый район (или участок) наведен на / затронут /нажал, мне нужно изменить его цвет, не затрагивая любой другой раздел.Границы в каждом разделе должны быть репрезентативными для изображения и не должны быть квадратными.Решение не может использовать canvas, так как сайт, над которым я работаю, должен использоваться в старых браузерах (лично я потрошен).

В идеале я хочу сделать это с помощью CSS, не используя слишком много JavaScriptили множество изображений.Кто-нибудь делал это раньше?

Редактировать: Я знаю, что люди предлагают тег <area>, но AFAIK не принимает псевдокласс: hover.

Редактировать 2: Я мог быиспользуйте это: http://www.netzgesta.de/mapper/

Answer 1

Еще один ответ сам ...

Несколько месяцев назад я наткнулся на библиотеку Raphael JS - http://raphaeljs.com/. Для тех из вас, кто не знаком с ней, это прежде всего библиотека SVG DOM. Если вы знаете кое-что о SVG, вы будете знать, что IE его не поддерживает, но поддерживает VML. Рафаэль обслуживает это также. Круто, верно?

В любом случае, я закончил тем, что сохранил AI-файл для карты в виде SVG-файла и импортировал пути в блок JSON, в основном проделав то же самое, что и код: http://raphaeljs.com/australia.html

Единственная проблема, с которой я столкнулся:

• Я хотел, чтобы фон карты был прозрачным. Настройка заливки на прозрачный, в то время как разрешение раздела на наведение мыши работало в Firefox, но в IE это не удалось. Я вместо этого выбрал заполнение пути белым, а затем установил непрозрачность на 0,01. После этого я продублировал путь и не заполнил его для создания границы.

Answer 2

Я вижу, в чем здесь проблема: создание, скажем, карты мира обычным способом - довольно большая нагрузка. Если я правильно понял, вам нужно иметь карту территории изображение и поместить эффекты наведения, чтобы область наведения соответствовала границам страны точно . SVG можно использовать для карты (рисование уже выполнено), но проблема в том, как сгенерировать карту области HTML с использованием координат карты SVG. Есть решение (я пробовал его, выглядит хорошо, по крайней мере, с предоставленной демонстрацией), которое переводит SVG в Raphael (генерирует координаты) с использованием PHP. Но опять же, для этого вам нужен Raphael.js ... хорошо, если вы передумаете: https://github.com/atirip/svg2raphael. И если вы не знакомы с Рафаэлем, потребуется время, чтобы привыкнуть к нему, документация не так хороша для меня -.

Редактировать: Я могу подтвердить, что перевод из SVG-> rapahel.js работает, но файлы SVG требуют некоторых настроек. Что я вижу в примере SVG, представленном в svg2raphael, файлы были сделаны с помощью Adobe Illustrator. Я пытался с SVG (обычный) из Inkscape, и он не работал должным образом, но мне удалось решить проблемы, например:

1. svg2raphael не будет переводить Inkscape, сгенерированный <path style="fill:#ff0000" ...></path> (установит fill = "none" !!!, поэтому результат невидим, но будет переведен правильно <path fill="#ff0000" ...></path> Похоже, он будет игнорировать все внутри style = "".
2. svg2raphael неправильно воспринимает выравнивания из Inkscape SVG, поэтому вам нужно либо переместить иллюстрацию в Inkscape, либо отредактировать файл SVG с помощью текстового редактора и изменить значение M на M0,0.
3. svg2raphael может переводить несколько элементов svg, но смотрит на основной тег, который генерирует Inkscape для выравнивания групп иллюстраций, иногда вся иллюстрация удаляется от области рендеринга, и вы ничего не видите. Надеюсь, это поможет!

Редактировать 2: Вы можете использовать стиль Inkscape = "" для создания правил CSS для применения к SVG, который отлично работает и сохраняет стиль вне SVG / Raphael!

Answer 3

Если вы используете jQuery, вы можете использовать плагин maphilight.документально подтверждено на http://davidlynch.org/projects/maphilight/docs/ и доступно на github на https://github.com/kemayo/maphilight

Answer 4

Вы можете использовать HTML <area> Tag