У меня есть несколько изображений, расположенных друг над другом, используя абсолютное позиционирование. Эти изображения частично прозрачны и имеют html area и map, чтобы сделать видимыми только видимые части. В jQuery я привязал события мыши к тегам area.
Это хорошо работает для одного изображения: mouseenter и mouseleave fire только при вводе отображаемой части изображения.
Проблема заключается в том, что он работает только для верхнего изображения. Для всех остальных он не запускает события, а CSS-наведение не работает, потому что на нем есть еще один образ. Это несмотря на то, что area не перекрываются, а map находятся перед изображениями.
Вот демонстрация проблемы: http://markv.nl/stack/imgmap2/
Вы можете поместить единственное, полностью прозрачное изображение поверх всех отдельных изображений и прикрепить все области изображения к этому изображению. Он будет действовать как элемент захвата событий мыши, и вы все равно можете изменить все отдельные изображения.
Это не прямой ответ/решение...
Почему вы не используете холст /SVG для рисования? Существует множество библиотек, которые облегчают задачу. Один из них RaphaëlJS (проверьте этот пример). Преимущество этой библиотеки в том, что она позволяет интерактивность мыши.
Другая библиотека, которую вы можете рассмотреть, EaselJS, но она не работает в браузерах, не поддерживающих <canvas>, поэтому нет IE < 9.
Работает только в том случае, если изображения не перекрываются (см. рисунок). В вашем случае все изображения имеют точно такой же размер и укладываются друг на друга. Поскольку браузеры обрабатывают изображения как твердые объекты (они не беспокоятся о прозрачности), нет способа определить, какой образ вы хотите навести на данный момент?
+-----------+-----------+
| | |
| 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
Вы также можете использовать дворец прозрачный div с фиксированной высотой и шириной, который будет иметь событие onclick() со связанной функцией. somehing like:
<div style="position: absolute; top: 10px; left: 10px; width: 100px; height: 100px;" onclick="dosomething();"></div>