1. HTML Image Maps
Teacher: Ms. Olifer

2. Client side image maps
Client side image map uses the “usemap” attribute of <IMG> tag and defined by <map> and <area> tags. 
Usemap attribute is used to identify the name of the map along with # tag. The <map> tag indicates various areas defined within an image. Similarly <area> tag is used to define an area within an image and take one of the following three shapes:

3. Rectangle
Rectangle is defined with the shape attribute  “rect” and accepts the coordinates in the format “x1,y1,x2,y2” where (x1,y1) are the upper left corner of the rectangle and (x2,y2) are the lower right corner of the rectangle.

4. Circle
Circle is defined with the shape attribute “circle” and accepts the coordinates in the format “x1,y1,r” whereas (x1,y1) is the center of the circle and r is the radius of the circle.

5. Polygon
Polygon is defined with the shape attribute “poly” and accepts the coordinates in the format “x1,y1,x2,y2,….,xn,yn” where (x1,y1) indicates the first point of the polygon and (xn,yn) is the last point of the polygon.

6. Note!
Use any of the coordinate’s locator tools available in the web in order to find the exact coordinates of an image.
Ensure the uploaded image size is the same as you measured for defining the link areas.

7. Example
<img src=" Example.png" alt="HTML Image Map" width=500 height=500 border="1" usemap="#imagemap1“ /> <map name="imagemap1"> <area alt="Home" coords="19,36,234,216" shape="rect" href=" target="_blank"> <area alt="Blog" coords="363,124,100" shape="circle" href=" target="_blank"> <area alt="Videos" coords="38,263,205,269,422,249,453,367,394,453,88,456,25,362" shape="poly" href=" webmasters/" target="_blank"> </map>