我有一个世界地图图像(png图像)，现在我计划在 map 上为纽约、旧金山、伦敦、东京、孟买等各个城市添加标记。
标记将像红点
我的应用程序中有这个图像，我最终想要的是这些标记应该有一个关联的 onclick javascript 函数，如 loadstasticschart(cityname).
因此，一旦单击标记，该城市的图形图表就会加载到页面中的相邻 div 中。
所以基本上我想要的是一种关联 map 中城市点的javascript函数onclick的方法。我怎样才能实现这个功能？
编辑:我确实认为方法是使用图像映射并有 <area>标签并在这些区域标签上有 onclick 事件。 are 标签具有定义可点击区域的坐标属性。现在剩下的最后一件事是用某种颜色为各个区域标签着色，因为现在 map 中不可见。我看到一篇文章，他们建议将 id 设置为区域标签，并通过 document.getElementbyId 设置 id 的颜色，因为样式标签更改为背景颜色或任何其他内容都不会使区域可见。
问候 普里扬克
最佳答案
我有两个小建议，一是避免使用区域标签并在图像上方放置 Canvas 标签，并使用 Paper.js在其上绘制并将每个绘制关联到一个 onclick 事件。如果您不想要在旧版浏览器中工作的东西，我推荐 Raphael.js相反。
无论如何...如果您仍然想使用区域标签，您可以有一个小的 dot.png 图像并将其作为区域标签的背景，并更改每个国家/地区区域标签的位置，即:
.area {
background: url("../images/dot.png") no-repeat;
}
.area#poland {
background-position: 100px 150px;
}
.area#argentina {
background-position: -100px -300px;
}
希望对您有所帮助，干杯。
----------------------------------------编辑-------------------- ------------
好的，这里有一个可行的解决方案:http://jsfiddle.net/8gDLV/1/
HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="map-container">
<img src="http://www.theodora.com/maps/new4/world_color.gif"/>
<div id="tucuman" class="location"></div>
<div id="buenosaires" class="location"></div>
<div id="paris" class="location"></div>
</div>
</body>
</html>
main.css:
#map-container {
width: 648px;
height: 413px;
border: 1px solid black;
position: relative;
}
#map-container .location {
position: absolute;
width: 10px;
height: 10px;
border-radius: 5px;
background: red;
cursor: pointer;
}
#map-container .location.active {
background: yellow;
}
#map-container .location#tucuman {
top: 337px;
left: 126px;
}
#map-container .location#buenosaires {
top: 350px;
left: 130px;
}
#map-container .location#paris {
top: 139px;
left: 264px;
}
main.js:
$(document).ready(function () {
$(".location").click(function() {
if (!$(this).hasClass(".active")) {
$(".location.active").removeClass("active");
$(this).addClass("active")
}
});
});
我希望它已经很清楚了，现在我没有时间更好地解释它，但如果您有任何疑问，请询问，我稍后会进行编辑。
干杯!!
关于图像点上的 javascript onclick 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9449029/