Карта изображений Javascript, изменить div

Хорошо, у меня есть 5 карт изображений,

<map name="Map" id="Map">
    <area id="Frame1" shape="poly" coords="549,225,687,234,682,373,543,366" href="#" alt="Frame 1" />
    <area id="Frame2" shape="poly" coords="702,219,705,354,841,347,833,213" href="#" alt="Frame 2" />
    <area id"Frame3" shape="poly" coords="482,376,476,510,624,515,627,383" href="#" alt="Frame 3" />
    <area id"Frame4" shape="poly" coords="653,540,646,404,748,403,755,537" href="#" alt="Frame 4" />
    <area id"Frame5" shape="poly" coords="764,513,882,515,885,370,764,368" href="#" alt="Frame 5" />
</map>

и некоторые отдельные div

<div id="person-1-slide-1"><img src ="images/allnewpictures/3.png" /></div>
<div id="person-2-slide-1"><img src = "images/allnewpictures/2.png" /></div>
<div id="person-3-slide-1"><img src ="images/allnewpictures/1.png"/></div>

пытаясь сделать это, когда я навожу курсор на одну из областей карты изображения, div изменится, поэтому при наведении курсора на карту изображения 1 изменяет div «person-1-slide-1», чтобы отобразить img в div id"person-2-slide-1"

Что я спрашиваю, есть ли javascript для карты изображения при наведении курсора, измените div, чтобы изображение изменилось.


javascript html jquery imagemap
person user2389087    schedule 16.05.2013    source источник
comment
Ваш html содержит ошибки. Обязательно исправьте их, прежде чем пытаться что-либо сделать.   -  person vinczemarton    schedule 16.05.2013

Ответы (1)


arrow_upward
0
arrow_downward

Добавьте в каждую область атрибут, указывающий, какой div следует изменить:

<map name="Map" id="Map"> 
      <area id="Frame1" data-ref="person-1-slide-1" shape="poly" coords="549,225,687,234,682,373,543,366" href="#" alt="Frame 1" />
      <area id="Frame2" data-ref="person-2-slide-1" shape="poly" coords="702,219,705,354,841,347,833,213" href="#" alt="Frame 2" />
      <area id"Frame3" data-ref="person-3-slide-1" shape="poly" coords="482,376,476,510,624,515,627,383" href="#" alt="Frame 3" />
      <area id"Frame4" data-ref="person-4-slide-1" shape="poly" coords="653,540,646,404,748,403,755,537" href="#" alt="Frame 4" />
      <area id"Frame5" data-ref="person-5-slide-1" shape="poly" coords="764,513,882,515,885,370,764,368" href="#" alt="Frame 5" />
</map>

Тогда попробуйте это:

$('map area').hover(function() {
    $('#'+$(this).data('ref')).find('img').show();
},
function() {
    $('#'+$(this).data('ref')).find('img').hide();
});
person hoelle2011    schedule 16.05.2013