目前,我有一张带有图片地图的图片。有没有办法让我编写一些JavaScript代码,它将使用区域名称作为变量来显示其实际内容?所有文本和区域名称都已在数据数组中。
例如,如果此区域名为Area1,则其中包含文本Text1等。
为什么我要这样做?我可以更容易地用它上面的名字打印出来。
编辑:图像地图示例
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
答案 0 :(得分:3)
不是很精确,但它可以作为进一步改进的良好基础
http://jsfiddle.net/6amd2842/1/
<强> HTML:强>
<div id="map">
<img src="http://placehold.it/145x126" width="145" height="126" alt="Planets" usemap="#planetmap">
</div>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" data-name="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" data-name="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" data-name="Venus">
</map>
<强> CSS:强>
#map {
position:relative
}
.map_title {
position:absolute;
}
<强> JQ:强>
$(function() {
$('area').each(function(){
var txt=$(this).data('name');
var coor=$(this).attr('coords');
var coorA=coor.split(',');
var left=coorA[0];
var top=coorA[1];
var $span=$('<span class="map_title">'+txt+'</span>');
$span.css({top: top+'px', left: left+'px', position:'absolute'});
$span.appendTo('#map');
})
})