The map tag defines the map for creating an image map. It tells the browser where the hot spots exist in the image. It also links the hot spots with different locations.
<map name="shapes">
<area shape="cicle" coords="58,50,40" href="circle.html" title="circle">
<area shape="rect" coords="136,11,227,89" href="rect.html" title="Rectangle">
<area shape="tri" coords="309,13,358,89,257,89" href="tri.html" title="triangle">
<area shape="default" nohref>
</map>In the map tag images with the clickable images. When you click the image part it shows the zoom image. You can see the live example of map tag from here. See Now
The above example defines three “hot spot” areas i.e. circle, rectangle, and triangle. Each area is linked to a different page. The name of the above map shapes. It is used in the use of map attributes of the image. The map tag defines the following areas.
- Circle
- A circular shape
- Rect
- a rectangular shape
- Tri
- an arbitrary polygon, with 3 or more points
- Default
- represents the remaining area of the image not define by any area tags.
Coords:
The attributes specify the coordinates that define the comers of the shape. The coordinates depend on the shape specified in the shape attribute:
| Shape | Coordinates |
| Rect | Coords = “x1,y1,x2,y2” X1, y1 defines the top left corner of rectangle and x2,y2 define the bottom, right corners of the rectangle. |
| Circle | Coords = “x,y,z” X,y define the center of the circle and r define the radius of the circle. |
| Poly | Coords= “x1,y1,x2,y2,x3,y3,………” The corners of the polygon |
Note that all coordinate value is relative to the top left corner of the image. The top left corner always has coordinates (0,0). The default shape type does not require coordinates. If no ref attribute is used, the hot spot will not link to anything. The title attribute specifies the area of a title. The title appears as a tooltip when the mouse is rolled over the hot spot.
Map Tag Reference
If you want to learn more about HTML or image tag then visit the official website: Visit
Visit the HTML tutorial list. And make strong your HTML concept. Click here. wuschools.com is always written about the HTML concept for the HTML lover. Ang writes about how HTML makes your life easy if you are a web site developer. We help you to continue your learning.
