Использование JQuery hover с картой изображений HTML

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

После неудачной игры с блоками я решил, что это может быть сделано с картой изображений старой школы. Я сделал схематическую тестовую карту с четырьмя контурами геометрической формы и "заполнил" их с помощью png rollovers. Идея состоит в том, чтобы связать карту изображения с нижним фоновым слоем, инициализировать все опрокидывания с помощью css {visibility: hidden} и использовать метод наведения Jquerys, чтобы сделать их видимыми, а также выявить связанный текст в отдельном div. Отдельная текстовая функция - это то, почему я не пытаюсь это сделать с помощью: hover pseudoclass вместо 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="#" onclick="location.href='http://www.stackoverflow.com'; return false;" id="box" />
        <area shape="polygon" coords="216,50,339,50,277,156" href="#" onclick="location.href='http://www.google.com'; return false;" id="triangle" />
        <area shape="polygon" coords="460,0,574,0,460,220" href="#" onclick="location.href='http://www.cnn.com'; return false;" id="bordertriangle" />
        <area shape="polygon" coords="704,65,769,115,744,196,665,196,640,115" href="#" onclick="location.href='http://slashdot.org'; return false;" 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>

ОТВЕТЫ

Ответ 2

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

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

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

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

Ответ 3

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

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

Ответ 4

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