Несколько изображений с JavaScript на одной странице

Question

Я использую this script, чтобы иметь изображение с некоторыми всплывающими окнами, когда курсор находится в некоторых зонах изображения. Например, у меня есть следующее:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<link href="/Scripts/ddimgtooltip.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="/Scripts/ddimgtooltip.js"></script> 

<img class="aligncenter" alt="click map" src="/images/my-image.png" usemap="#mymap" width="300" height="424" border="0" /> 

<map id="mymap" name="mymap"> 
<area shape="poly" alt="" title="" coords="46,168,63,160,84,270,68,273" href="" target="" rel="imgtip[11]"/> 
</map> 

Это хорошо работает, когда у меня есть только одна карта изображения на страницу. Но когда я, но второй, у меня нет всплывающих окон (только ссылка). Часть карты изображения работает, но не часть JavaScript. Зачем?

Answer 1

Возможно, это связано с вашим файлом JavaScript?

В верхней части ddimgtooltip.js где вы определяете всплывающие подсказки: синтаксис

tooltips[0]=["red_balloon.gif", "Here is a red balloon<br /> on a white background", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}] 
tooltips[1]=["duck2.gif", "Here is a duck on a light blue background.", {background:"#DDECFF", width:"200px"}] 
tooltips[2]=["dynamicindex14/winter.jpg"] 
tooltips[3]=["dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}] 

Каждый TOOLTIP должен быть следующим:

tooltip[x]=['path_to_image', 'optional desc', optional_CSS_object] 

Затем убедитесь, что ваши rel пути являются точными. Для этого примера (взятый из предоставленной ссылки), используйте:

<p><a href="http://www.dynamicdrive.com" rel="imgtip[0]">Link 1</a></p> 
<p><a href="http://javascriptkit.com" rel="imgtip[1]" style="float:right">Link 2</a></p> 
<p><a href="http://cssdrive.com" rel="imgtip[2]">Link 3</a></p> 
<p><a href="http://codingforums.com" rel="imgtip[3]">Link 4</a></p> 

Кроме того, вы используете версию jQueryдревнего.

Try:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>