javascript onclick events on image points

Question

I have a world map image (png image), now I am planning to add markers on the map for various cities like new york, san francisco, london, tokya, mumbai etc.. The markers will be like red dots
I have this image inside my application, what I finally want is these markers should have an associated onclick javascript function like loadstasticschart(cityname).
So once the marker is clicked graphical charts for that city is loaded in the neighboring div in the page.
So basically I want is a way to associate javascript function onclick of the city points in the map. How can I achieve this functionality?

Edit: I did figure the way is to user image maps and have <area> tags and have onclick event on these area tags. The are tags have coordinate attribute which define the clickable area. The last thing remaining now is to color the individual area tags with some color since there are invisible in the map right now. I saw a post where they have suggested to set id to area tags and set the color of the id by document.getElementbyId since style tag change to background color or anything is not making the areas visible.

Regards Priyank

Answer 1

I have two small suggestions, one is to avoid using area tags and place above the image a canvas tag, and use Paper.js to draw on it and associate to each draw an onclick event. If you wan't something that will work in older browsers I recommend Raphael.js instead.

Any way... if you still want to use the area tag, you could have a small dot.png image and place it as background to the area tag and change it's position for each country's area tag, ie:

.area {
  background: url("../images/dot.png") no-repeat;
}
.area#poland {
  background-position: 100px 150px;
}
.area#argentina {
  background-position: -100px -300px;
}

I hope it helps, cheers.

---------------------------EDIT-------------------------------

Ok, here you have a working solution: http://jsfiddle.net/8gDLV/1/

The 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")
    }
  });
});

I hope it's clear as it is, now I don't have time to explain it better, but if you have any doubt please ask it and I'll edit it later.

Cheers!!

javascript onclick events on image points

Question

1 answers

solution1
2 ACCPTED 2012-02-26 00:43:03

javascript onclick events on image points

Question

1 answers

solution1 2 ACCPTED 2012-02-26 00:43:03

solution1
2 ACCPTED 2012-02-26 00:43:03