[HTML Program] - Usemap

Read More

[Part-10] HTML : Usemap

If you have not read my previous posts of HTML then read it for better understating of today's HTML post.


In today's post I will tell you about usemap . Usemap is an image attribute it is used to create clickable areas on an image. There are three types of shapes are used in usemap i.e. circle, rectangle, polygon. We use coordinates to create these shape. For circle we use three coordinates,  in rectangle we use four coordinates and in polygon there is no fixed limit for coordinates. You will better understand these things when you see an example so, follow the below steps to see the usemap's working :-

• Open notepad or notepad++.
• Write or copy and paste below given HTML code.
• Then save the below given image.

• Then copy the image location with image name and paste it in our given HTML code in place of this "/mysite/b.jpg".
• In HTML code you have also seen that there is usemap="#buttonmap" and <map name="buttonmap"> is written if you want to change the name just replace the highlighted text with the name that you want to give.
• If you want to change the size of circle, polygon and rectangle then you need to change this highlighted part coords="345,78,40" according to the shape you have given.
• Now save it as anyname.html
• Then open it with browser.
• You will notice when you open it and after that when you click on the image (Means on the earth image which is created on the image)you will goto another site this is done by using usemap and if you to change the link then in HTML code just change the highlighted part href="/mysite/company.htm"
• You have also seen that on the image (Means NEWSLETTER written on the image)this area is also clickable in this we use rectangle shape and on when you click on the image corners (Means SUBSCRIBE written on the image) that areas are also clickable here we use polygon shape.
• When you want to end the usemap place this tag </map> in the ending.

HTML Code :-

See the below video for better understanding of usemap :-

If you have any doubt post in the comment box.

For more updates like us on Facebook.

Read More