How to make an image area clickable
This does not mean, "Do all the work for me!" kind of questions. I just want to know which approach you think is appropriate for this task.
I have this card:
As you can see from the blue marker I roughly drew some of the options / areas of the map. These are the areas I want to serve as links.
But I am not quite sure how to understand this problem, since all areas have rather strange shapes.
I've looked over the cords , but it seems like a huge job with all the twists and turns I need to do.
I would be great if I could just slice the areas in Photoshop and save each one as .png and just tell my page to ignore the transparent area! But that's just a wish, I suppose.
I hope one of you has a suggestion I missed.
source to share
Try them -
You can try building an SVG version of your map and then implementing clickable with one of these libraries depending on which one you choose.
Here is one tutorial for this with Raphael JS - http://parall.ax/blog/view/2985/tutorial-creating-an-interactive-svg-map
source to share
Make an image for each clickable area, for example:
Register the click event of the img element from the page, like this:
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);
});
source to share