Использование наведения курсора jQuery с помощью HTML-карты изображений

Question

У меня есть сложное фоновое изображение с множеством небольших областей, которые нуждаются в выделении иллюстраций с повторным отображением, наряду с дополнительным отображением текста и связанными ссылками для каждой из них.Последняя иллюстрация объединяет несколько статичных изображений с прозрачностью с использованием z-индекса, а иллюстрации с переносом подсветки должны отображаться в одном из промежуточных слоев “сэндвича” для достижения желаемого эффекта.

После некоторой безуспешной возни с блоками я решил, что это можно сделать с помощью карты изображений старой школы.Я создал схематичную тестовую карту с четырьмя контурами геометрических фигур и “заполнил” их с помощью ролловеров в формате png.Идея состоит в том, чтобы связать карту изображения с нижним фоновым слоем, инициализировать все откаты с помощью css {visibility:скрытые} и используйте метод наведения курсора Jquery, чтобы сделать их видимыми, а также отобразить связанный текст в отдельном div.Отдельная текстовая функция - вот почему я не пытаюсь сделать это с помощью псевдокласса :hover вместо jQuery hover.Поскольку я использовал карту изображений, я увеличил размер всех PNG-файлов с опрокидыванием (с прозрачным фоном) до полного контейнера для точного размещения, чтобы все точно выровнялось.

То, что у меня есть, работает...не совсем!Карта изображений нанесена правильно, чтобы активировать только геометрические области.Но href из каждой области ролловера работает только с перерывами, и использование Jquery hover с видимостью css приводит к сбоям.Желаемое поведение заключается в том, что скатывание в область просто сделало бы форму сплошной.Что на самом деле происходит, так это то, что любое движение внутри фигуры приводит к быстрому переключению между видимым и скрытым;когда курсор останавливается внутри фигуры, она может быть видна, а может и нет.Любые идеи приветствуются!

пример настройки наведения курсора мыши (в конечном счете я буду использовать массивы для реальных переносов, связанных ссылок и текста):

$('#triangle').hover(
    function() {
        $('#ID_triangle').css({'visibility' : 'visible'});
    },
    function() {
        $('#ID_triangle').css({'visibility' : 'hidden'});
    }
)

карта изображения:

<div id="container">
    <img src="images/testMap_w.png" width="800" height="220" alt="TestMap W" usemap="#testMap">
    <map name="testMap">
        <area shape="polygon" coords="20,20,106,20,106,106,20,106" href="http://www.stackoverflow.com" id="box" />
        <area shape="polygon" coords="216,50,339,50,277,156" href="http://www.google.com" id="triangle" />
        <area shape="polygon" coords="460,0,574,0,460,220" href="http://www.cnn.com" id="bordertriangle" />
        <area shape="polygon" coords="704,65,769,115,744,196,665,196,640,115" href="http://slashdot.org" id="pentagon" />
    </map>
    <img src="images/testMap_box.png" width="800" height="220" alt="TestMap Box" id="ID_box">
    <img src="images/testMap_triangle.png" width="800" height="220" alt="TestMap Triangle" id="ID_triangle">
    <img src="images/testMap_border_triangle.png" width="800" height="220" alt="TestMap Border Triangle" id="ID_bordertriangle">
    <img src="images/testMap_pentagon.png" width="800" height="220" alt="TestMap Pentagon" id="ID_pentagon">
</div>

Answer 1

Вам следует ознакомиться с этим плагином:

https://github.com/kemayo/maphilight

и демо-версия:

http://davidlynch.org/js/maphilight/docs/demo_usa.html

во всяком случае, вы могли бы позаимствовать из него какой-нибудь код, чтобы исправить свой.

Answer 2

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

Картограф изображений это плагин jQuery, который я написал для устранения некоторых недостатков Map Hilight (и изначально он был расширением этого плагина, хотя с тех пор был почти полностью переписан).Изначально это была просто возможность поддерживать состояние выделения областей, устранять проблемы с совместимостью браузера.Однако с момента его первоначального выпуска несколько месяцев назад я добавил множество функций, включая возможность использовать альтернативное изображение в качестве источника для основных моментов.

Он также имеет возможность идентифицировать области как "маски", что означает, что вы можете создавать области с "отверстиями" и дополнительно создавать сложные группировки областей.Например, область A может привести к выделению другой области B, но сама область B не будет реагировать на события мыши.

На веб-сайте есть несколько примеров, которые демонстрируют большинство функций.В репозиторий github также содержит больше примеров и полную документацию.

Answer 3

Я нашел этот замечательный сценарий отображения (mapper.js), который я использовал в прошлом.Отличие этого в том, что вы можете навести курсор на карту или ссылку на своей странице, чтобы выделить область карты.К сожалению, он написан на javascript и требует много встроенного кодирования в HTML-мне бы хотелось, чтобы этот скрипт был перенесен на jQuery : P

Кроме того, ознакомьтесь со всеми демо-версиями!Я думаю, что этот пример это почти можно превратить в простую онлайн-игру (без использования flash) - убедитесь, что вы нажимаете на разные ракурсы камеры.

Answer 4

Хотя плагин jQuery Maphilight выполняет эту работу, он опирается на устаревшую подробную карту изображений в вашем html.Я бы предпочел сохранить mapcoordinates внешними.Это может быть как JS с плагином jquery imagemap, но в нем отсутствуют состояния наведения.Хорошим решением является визуализация геокарт Google во flash и JS.Но будущее с открытым исходным кодом для такого рода векторных данных, однако, svg, учитывая поддержку svg во всех современных браузерах и поиск в Google svgweb flash convert для IE, почему бы не использовать плагин jquery для добавления ссылок и переходных состояний на svg-карту, как в JS demo здесь?Таким образом, вы также избежите сложного этапа преобразования векторной карты в координаты imagemap.