Photoshop Question posted in
The official user guide can be found here.

How to make area of image clickable – Photoshop

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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 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);
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search