Использование JQuery наведите курсор на HTML-карту изображения

Question

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

После некоторой неудачной игры с блоками я решил, что это можно сделать с помощью старой карты изображений. Я сделал схематическую тестовую карту с четырьмя контурами геометрических фигур и «залил» их, используя png rollovers. Идея состоит в том, чтобы связать карту изображения с нижним фоновым слоем, инициализировать все ролловеры с помощью css {visibility: hidden} и использовать метод наведения курсора 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

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

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

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

На сайте есть несколько примеров, демонстрирующих большинство функций. Хранилище github также содержит больше примеров и полную документацию.

Answer 3

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

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

Answer 4

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