Finding the Exact coordinates of an Image for an Image Map.

Hi,

In this post, I would like to discuss about a solution for finding the exact coordinate values of and image using some Java script.

Before the solution – here is a brief description about the problem.

Image map is such a wonderful feature, which will allow you to navigate to various pages using one single image. Say if we have the Geographical Map of India & we want to navigate to different state official websites by clicking on the particular state- on the image. This looks astonishing for any Web Illiterate. But the fact is this is a very easy task to be implemented in terms of coding. But the tedious part of this whole thing is getting the coordinates.

 

In one of my Projects I worked I have come across an image which is in rectangular shape with rectangular shaped fields in the image. Then I started taking the coordinates using the MS Paint tool. I have manually noted down the co ordinates and copied them into the of the Image map.

And the image map worked out fine. Later on when I had to map an image of the following layout I faced a lot of ruckus in taking the coordinates. I took the coordinates in paint by placing the cursor and noting the points. But after mapping the actual hyper link was pointing at some weird places instead of the actual place. Say if I am pointing at x(40,30) it is pointing the hyperlink at x( 20,10) or so. Then with the help of one of my friends Mr. Praveen Battula I have solved the issue. Praveen has written a small snippet of code in Java Script which has greatly reduced my pain. The java script code uses the cursor position to give the exact coordinates. Here is the Code snippet

 

 

 

     

     

 

     

 

     

       

 

 

     

 

     

        You pointed on x = - y =

       

       

 

     

 

·         If you want to use this code you are to do the following things:

·         Copy the code into a new notepad.

·         Save it with any name but extension as’ .html’

·         In the Image: Url field within the braces give the path of the target image in single quotes (‘).

·         Save the file and open it in a Browser.

·         Now you will find the image and two text boxes in the browser window.

·         Place the cursor on the image and note down the coordinate that are being displayed in the text boxes below the image.

Copy the coordinates and map them using the

A small demo is present in the following link on how to write an image map and how does that look.

http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_areamap

 

 

Happy Coding Folks,

 

Yours ,

Sriki