Как изменить контент на основе положения мыши над изображением?

Question

У меня есть фотография страны Норвегия: https://autopower.no/images/geoLocation/NO-578.png
Как вы можете видеть - вид - изображение разделено на округа.

Когда парения пользователя над названиями графств на левой стороне - Переключатели изображения между 20 равными изображениями с соответствующим округом выделены наряду с некоторой информацией на правой стороне: https://autopower.no/?Page=Dealers

То, что я хотел бы сделать, состоит в том, чтобы иметь то же самое, что происходит (с содержимым справа), когда пользователь наводил на себя изображение, основанное на том, на каком уезде они парят.

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

Может кто-то помочь мне, давая мне несколько советов на то, что я должен смотреть в? как начать работу или сказать мне, если это невозможно с тем, что я создал до сих пор - если мне нужно/должен использовать другой подход?

В какой-то мере я знаком с jQuery.
Надеюсь не использовать Flash.

Answer 1

Вы можете использовать .mouseover() и MouseOut() методы JQuery для достижения этой цели, например:

$(".county").mouseover(function() { 
    var elementId = "#text-" + $(this).attr("id").split("-")[1]; 
    $(elementId).removeClass("hidden"); 
}); 

$(".county").mouseout(function() { 
    var elementId = "#text-" + $(this).attr("id").split("-")[1]; 
    $(elementId).addClass("hidden"); 
}); 

Я построил простой скрипку, демонстрирующего использование этого: http://jsfiddle.net/X2u2y/

Полная документация для этого можно найти на сайте API JQuery: http://api.jquery.com/mouseover/

EDIT:

Я вижу, что вы хотите здесь, чтобы использовать один графический объект, с hoverable регионов (карта изображения). Для того, чтобы сделать это, к сожалению, вам придется отработать координаты для каждого hoverable области, и составляют элемент карты, состоящий из областей, в формате:

<map name="parts"> 
    <area shape="rect" coords="20,6,200,60" text-ref="county1"> 
    <area shape="rect" coords="100,200,50" text-ref="county2"> 
</map> 

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

http://jsfiddle.net/jcAe9/