3

This is not a: "Do all the work for me!" kind of question. I just wanna know which approach you think would be suitable for this challenge.

I have this map:

map

As you can see by the blue marker, I've roughly drawned some selections/areas of the map. Theese areas I want to serve as links.

But I don't quite know how to grasp this challenge, since all of the areas have quite odd shapes.

I have looked at cords, but it seems like a huge job with all of the twists and turns that I would need to do.

I would be awesome if I could just slice up the areas in Photoshop and save each of them as .png and just tell my page to ignore the transparent area! But that's just wishfull thinking I suppose.

I hope that one of you have a suggestion that I've overlooked.

2 Answers2

1

Give a try to these -

  1. http://polymaps.org/
  2. http://www.amcharts.com/javascript-maps/
  3. Raphael JS

You can try making an SVG version of your map and then implement it's clickiness with one of these libraries depending on which one you choose.

Here's one tutorial to do this with Raphael JS - http://parall.ax/blog/view/2985/tutorial-creating-an-interactive-svg-map

Sujit Agarwal
  • 12,348
  • 11
  • 48
  • 79
  • 1
    I was so lucky to find an SVG of my map: [link](http://commons.wikimedia.org/wiki/File:Sj%C3%A6lland_municipalities.svg) So I will try to give this a go! –  Sep 15 '14 at 21:19
  • 1
    Great! Wish you luck on this attempt :) Do not forget to mark the answer as correct if it was useful for you. :) – Sujit Agarwal Sep 15 '14 at 21:20
  • Wow, this really was a time-saver! Thank you very much! –  Sep 15 '14 at 21:49
0

Make an image for each clickeable zone, like this:

colored map

Register to the click event of the img element from the page, this way:


var getAreaFromXY = function(x,y) {
// for each section colored map
// get pixel color on x,y (see http://stackoverflow.com/questions/8751020/how-to-get-a-pixels-x-y-coordinate-color-from-an-image)
// if the color is red, that is the zone
};

$(".post-text img").click(function(e) {
  var area = getAreaFromXY(e.offsetX, e.offsetY);
});
dseminara
  • 11,665
  • 2
  • 20
  • 22