0

HTML Image Area Maps

An image map is a feature of HTML/XHTML in which multiple hyperlinks can be provided into same image.So how does this image map works? An image file in computers is a combination of coordinates, so we can easily say that image is a kind of map which one can navigated through coordinates.  As we normally identify destinations/places in online maps on the basis of coordinates(latitudes/longitudes), in the similar manner we can identify the given portion of image by specifying its coordinates in an image file. So using image map feature, we can link the different parts of an image with different hyperlinks as needed. This can be helpful in many scenarios in which you have a basic image containing different things and you want the user to navigate to child pages based upon the item user clicks on the basic image.

Lets consider an example that I will going to program here. I will take a basic image of  kids alphabets chart and will going to link images of an object starting with different alphabets present in single image file. Before starting to program, many of us wonders how will we find the coordinates of given area in an image. Very simple method of doing it is to open the image file in MS Paint and just place the mouse pointer over the area whose coordinates you need to find out. You will find the coordinates in bottom most Window Banner Label .  In the picture shown below, current coordinates are displayed at bottom leftmost position and the value of these coordinates changes on changing your mouse pointer on image in MS Paint window .

coordinate

Note : This method of finding is acceptable for beginners but not for professional work. Well there are multiple online tools to generate image maps in terms of coordinates using which one can easily convert an ordinary image to coordinates map that can further be used in html image maps.

Now I will start writing a html code to form image map from alphabet chart, Using this image map, if you click on some alphabet , the image of an object related to that alphabet gets opened. Basically there are 3 html tags that are of importance, first is <img> and other are <map> and <area>.

You can define the html image area map using html <map> tag and <area> tag will specify the shape of an area selected inside an image. For example I have created  “alphabetmap” and this image area map contains multiple rectangular areas. You can define the circular area ans others as well. And after creating this map I am using it in <img> html tag with  “usemap” property of <img> tag.

So friends you can try this yourself in locally inside your browser or you can click on follwoing to see how it actually looks like in real time browser.

http://codepointer.in/try_html_image_area_map.html

Please share your feedback and comments on how you like this post and how I can make it better. Keep commenting. Meet you again with next post. 🙂

For further reading about image area maps, you can go to :

http://www.w3schools.com/tags/tag_map.asp

 

 

 

 

Share Button

Nidhi

Leave a Reply

Your email address will not be published.