Internet Programming : map tag

The first post based on Internet Programming Lab!

Ex 1 is based on basic HTML 5 tags, like, paragraph, break line, anchor, image, head,title and also based on the attributes of tags like src in img tag and href in anchor tag

Learn them from google and w3schools.com

Then there's map tag, below is an example :

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

 

You can try the code in this page if you have never used this tag : 

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

 

In the above example, you will see that different parts of the image is mapped to pages that  contain enlarged image of that part. It's planets here.

About the attributes. To give the coordinates for circle shape, you need to know the center of the circle and the radius.

It goes like : x,y,r

 

where (x,y) is the center and r is the radius.

 

You can find the points by opening the  image in an editor that can tell the coordinates of various points on the image just by scrolling over the mouse over to that point. Editors like Paint in windows and KolorPaint in CentOS can do that.

 

For rectangle, you need to the points on the opposite sides of a diagonal, like the left top corner and the right bottom corner point of the rectangle.

left top : (a,b)

right bottom : (c,d)

 

The attribute is like :
coords="a,b,c,d"

 

Try it out if you haven't! It's nice! :)