目前我正致力于将图像显示为佛罗里达地图上的弹出窗口。用户的一般效果是他们点击地图上的某个位置,并在佛罗里达州的地图上显示图像和位置描述。我理解如何使div显示/消失而不是我想要的格式。
我目前有一个工作函数来检索未显示的光标位置,我只发布了相关代码。我的文档的其余部分已正确关闭标记和所有文件。
我已经尝试了几种方法,你将在下面看到,但我现在正试图围绕这个问题包围我的脑袋。看看其他帖子帮助我缩小了我想要完成的任务,但我并不完全确定如何让事情发挥作用。
任何帮助将不胜感激!
<!--Florida Map Animation Script-->
<script>
$(function() {
$("#mya").click(function(){
var x = document.getElementById("cursorX").value;
var y = document.getElementById("cursorY").value;
$("#myaImg").style.position = "absolute";
$("#myaImg").style.left = x;
$("#myaImg").style.top = y;
$("#myaImg").style.z-index = "2";
$("#myaImg").style.display = "block";
$("#myaImg").fadeToggle("slow");
});
});
</script>
</head>
<body>
<input type="hidden" id="cursorX">
<input type="hidden" id="cursorY">
<!--Image Map of Florida used to show location info-->
<div id="flMap" style="position: inline; z-index: 1">
<div id="myaImg" style="display: none; position: absolute; z-index: -1">
<table border="1">
<tr><td><img src="image.jpg"/></td></tr>
<tr><td> </td></tr>
</table>
</div>
<img src="floridaMap.png" alt="" usemap="#map1404153302988">
<map id="map1404153302988" name="map1404153302988"><area id="rai" shape="rect" coords="332,165,353,178" title="Rainbow River" alt="Rainbow River" onClick="show('rai')" target="_self"><area id="cry" shape="rect" coords="312,172,330,186" title="Crystal River" alt="Crystal River" target="_self"><area id="swe" shape="rect" coords="325,213,346,229" title="Sweetwater Organic Farm" alt="Sweetwater Organic Farm" target="_self"><area id="north" shape="rect" coords="312,233,335,249" title="Fort De Soto North Beach" alt="Fort De Soto North Beach" target="_self"><area id="east" shape="rect" coords="307,245,329,263" title="Fort De Soto East Beach" alt="Fort De Soto East Beach" target="_self"><area id="coq" shape="rect" coords="308,259,336,280" title="Coquina Bayside" alt="Coquina Bayside" target="_self"><area shape="rect" coords="334,271,363,292" title="Myakka River" alt="Myakka River" target="_self" id="mya"><area shape="rect" coords="498,479,499,480" alt="HTML Map" title="HTML Map" href="http://www.html-map.com/" target="_self"></map>
</div>
更新:解释我在提出类似问题时提出这个问题;我能够看到我需要应用哪些概念来解决问题。但是,我没有理解申请,并要求澄清。如果其他人对应用程序有类似的问题,我希望这会有所帮助。如果没有,请考虑重复。我道歉。