图像点上的javascript onclick事件

Question

我有一张世界地图图像（PNG图片），现在我打算在地图上为纽约，旧金山，伦敦，托卡亚，孟买等各个城市添加标记。标记将像红点一样
我在应用程序中有此图像，我最终想要的是这些标记应具有关联的onclick javascript函数，例如loadstasticschart(cityname).
因此，一旦单击标记，该城市的图形图表就会加载到页面的相邻div中。
所以基本上我想要的是一种在地图上关联城市点的javascript函数onclick的方法。 如何实现此功能？

编辑：我确实认为方法是用户图像地图并具有<area>标记，并且在这些区域标记上具有onclick事件。 are标签具有可定义可点击区域的坐标属性。 现在剩下的最后一件事是用一些颜色为各个区域标签着色，因为现在地图上不可见。 我看到一则帖子，他们建议将id设置为区域标签，并通过document.getElementbyId设置ID的颜色，因为样式标签更改为背景色，或者任何内容都不会使区域可见。

问候普里扬克

Answer 1

我有两个小建议，一个是避免使用区域标签，而在图像上方放置一个画布标签，并使用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事件

问题描述

1 个解决方案

解决方案1
2 已采纳 2012-02-26 00:43:03

图像点上的javascript onclick事件

问题描述

1 个解决方案

解决方案1 2 已采纳 2012-02-26 00:43:03

解决方案1
2 已采纳 2012-02-26 00:43:03