圖像點上的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