создание интерактивной карты с использованием javascript

Question

Итак, у меня есть следующий пример изображения ... У меня есть идея, что это изображение начнется без зеленого оттенка. Когда пользователь перейдет в эту область, он станет зеленым, а также станет ссылкой.

У меня есть несколько областей, это всего лишь пример.

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

Есть ли лучший способ?

Answer 1

ImageMapster

ImageMapster плагин JQuery, который позволяет активировать карты изображения HTML без использования Flash. Он работает практически везде, где работает Javascript, включая современные браузеры, Internet Explorer 6 и мобильные устройства, такие как iPads, iPhones и Android.

Answer 2

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

Вместо использования javascript вы можете легко использовать css. Создайте разделы, как вы описали, и правильно настройте их. Вместо того, чтобы на самом деле помещать изображение в разметку, поместите ссылку в разметку и используйте css, чтобы сделать изображение фоном ссылки и настроить отображение ссылок на блокировку, чтобы весь div стал интерактивным.

Было бы что-то подобное для HTML одной части:

<div id="slice1" class="slice"><a href="#"></a></div> 

и CSS будет что-то вроде:

.slice a 
{ 
    display: block; 
} 
#slice1 
{ 
    width: 100px; 
    height: 100px; /* set your actual width/heights */ 
    background-image: url(path_to_your_image); 
    background-position: center top; 
} 
#slice1:hover 
{ 
    background-position: center bottom; 
} 

В этом примере файл фоновое изображение будет 2 изображения, изображение при первой загрузке, а затем изображение наведите указатель ниже. Когда вы изменяете положение фона при наведении, вы показываете изображение ниже. Это также устраняет раздражающую версию изменения фонового изображения и получения белой вспышки при первом зависании.

Это не требует кодирования javascript, внешних библиотек javascript или других зависимостей.

Это было написано очень быстро, поэтому вам может потребоваться внести некоторые изменения, но это поможет вам начать работу.