HTML <map> Tags-create an image map with clickable regions

Definition and usage

Defines a client-side image map. Image mapping (IMAGE-MAP) refers to an image with a clickable area.

All major browsers support <map> tags.

Note: The area element is always nested inside the map element. The area element defines the region in the image map.

The Usemap property in can refer to the ID in <map> or the Name property (depending on the browser), so we should add both the ID and the Name property to <map>.

Instance

Image map with clickable area:

imgsrc="/i/eg_planets.jpg"Border="0"usemap="#planetmap"alt="Planets"/><map name="Planetmap"Id="Planetmap"><Areashape="Circle"coords="180,139,14"href="/example/html/venus.html"Target="_blank"alt="Venus"/><Areashape="Circle"coords="129,161,10"href="/example/html/mercur.html"Target="_blank"alt="Mercury"/><Areashape="rect"coords="0,0,110,260"href="/example/html/sun.html"Target="_blank"alt="Sun"/></map><p><b> Note: The </b>img element"Usemap"Property refers to the map element in the"ID"Or"name"Property (depending on the browser), so we added the map element to the"ID"And"name"Property. </p></body>
The effect is as follows (you can click to see the effect):
coords attribute definition and usage with:<area> tag
The Coords property specifies the x and y coordinates of the area.
The Coords property is used in conjunction with the Shape property to specify the size, shape, and position of the area.
The coordinates of the upper-left corner of the image are "0,0".
Detailed Explanation:
The Coords property of the <area> tag defines the coordinates of the mouse-sensitive area in the client image map. The number of coordinates and their meanings depend on the area shape that is determined in the Shape property. You can define a hyperlink area in a client-side image map as a rectangle, a circle, or a polygon.
The appropriate values for each shape are listed below:
Circle: Shape= "Circle", coords= "x, Y, z"
The X and Y here define the position of the center point ("0,0" is the coordinate of the upper-left corner of the image), and R is the circle radius in pixels.
Polygon: shape= "polygon", coords= "X1,y1,x2,y2,x3,y3,..."
Each pair of "x, y" coordinates defines a vertex of the polygon ("0,0" is the coordinate of the upper-left corner of the image). Defining a triangle requires at least three sets of coordinates, while high-latitude polygons require a larger number of vertices.
Polygons are automatically closed, so you don't need to repeat the first coordinate to close the entire area at the end of the list.
Rectangle: shape= "Rectangle", coords= "X1,y1,x2,y2"
The first coordinate is the vertex coordinate of one corner of the rectangle, and the other pair is the vertex coordinate of the diagonal, and "0,0" is the coordinate of the upper-left corner of the image. Note that defining a rectangle is actually a simplified method of defining a polygon with four vertices.
For example, the following XHTML fragment defines a mouse-sensitive area in the lower right one-fourth of a 100x100 pixel image, and defines a circular area in the middle of the image.
<map name= "Map" >  <area shape= "rect" coords= "75,75,99,99" nohref= "Nohref" >  <area shape= "Circ" coords= "50,50,25" nohref= "Nohref" ></map>
Hints and Notes
Note: If the coordinates and other areas in an area label overlap, the first occurrence of the region label is preferred. The browser ignores coordinates beyond the bounds of the image.
HTML <map> Tags-create an image map with clickable regions