Как сделать карты с абсолютным расположением изображений с помощью мыши?

У меня есть несколько изображений, расположенных друг над другом, используя абсолютное позиционирование. Эти изображения частично прозрачны и имеют html area и map, чтобы сделать видимыми только видимые части. В jQuery я привязал события мыши к тегам area.

Это хорошо работает для одного изображения: mouseenter и mouseleave fire только при вводе отображаемой части изображения.

Проблема заключается в том, что он работает только для верхнего изображения. Для всех остальных он не запускает события, а CSS-наведение не работает, потому что на нем есть еще один образ. Это несмотря на то, что area не перекрываются, а map находятся перед изображениями.

Вот демонстрация проблемы: http://markv.nl/stack/imgmap2/

Ответ 1

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

Ответ 2

Это не прямой ответ/решение...

Почему вы не используете холст /SVG для рисования? Существует множество библиотек, которые облегчают задачу. Один из них RaphaëlJS (проверьте этот пример). Преимущество этой библиотеки в том, что она позволяет интерактивность мыши.

Другая библиотека, которую вы можете рассмотреть, EaselJS, но она не работает в браузерах, не поддерживающих <canvas>, поэтому нет IE < 9.

Ответ 3

Работает только в том случае, если изображения не перекрываются (см. рисунок). В вашем случае все изображения имеют точно такой же размер и укладываются друг на друга. Поскольку браузеры обрабатывают изображения как твердые объекты (они не беспокоятся о прозрачности), нет способа определить, какой образ вы хотите навести на данный момент?

  +-----------+-----------+
  |           |           |
  |   img1    |   img2    |
  |           |           |
  |           |           |
  +-----------+-----------+
  |           |           |
  |   img3    |   img4    |
  |           |           |
  |           |           |
  +-----------+-----------+

Однако вы можете обойти это:

Просто используйте одну карту изображений на одном из изображений, содержащих все области, и с помощью небольшого javascript вы можете запускать зависание на всех других изображениях.

$("area").hover(function(){
    var $target = $("#"+$(this).data("target")); // getting the target image
    $target.attr("src",$target.attr("src").replace("slice","slice-focus")); //replacing the src with the src of the hover image
},function(){
    var $target = $("#"+$(this).data("target"));
    $target.attr("src",$target.attr("src").replace("focus-","")); //revert the changes
});

Рабочий пример, основанный на вашем коде: jsFiddle-Demo

Ответ 4

Вы также можете использовать дворец прозрачный div с фиксированной высотой и шириной, который будет иметь событие onclick() со связанной функцией. somehing like:

<div style="position: absolute; top: 10px; left: 10px; width: 100px; height: 100px;" onclick="dosomething();"></div>