HTML image map

ArticleDirectory

• What is an image map?
• How to make it?
• Sample Code

What is an image map?

Divide an image into multiple regions and each region points to a different URL address. For example, an image of a map of China is divided into several regions by province and city. These regions are called Hot spots. You can click the hot areas to connect to the pages related to the corresponding provinces and cities, this is the image map.

 

How to make it?

1. First, you must define the shape, location coordinates, URL address, and other information of each hotspot area on the image. This process is called image hotspot ing. The <Map Name = mapname> </map> label must be used for image hotspot ing. The name attribute specifies a name for the image hotspot ing.
2. The <area> label description is used for each region in the image hotspot ing. The <area> label format is: <area shape = "shape" coords = "coordinate" href = "url">, the href part can also be replaced with nohref, indicating that clicking the mouse in this area is invalid. <Area> A tag can also have a target attribute to indicate the window or frame in which the browser displays the webpage Resources pointed to by the href attribute.
3. After defining the image hotspot, add an attribute setting named usemap in the Image Tag. The usemap attribute specifies that the image is used as an image map, the set value is the used image hotspot ing name, in the format of adding a "#" character before the name attribute setting value in the <map> label. For example,

Example Code

Code:

 
<IMG SRC= "China.gif" Usemap= "# Mymap">
 

Map Name = "mymap">
 

<Area Shape= "Rect" Href= "A.html" Coords= "0, 0, 50">
 

<Area Shape= "Circle" Href= "B .html" Coords= "120,80, 50">
 

<Area Shape= "Poly" Href= "C.html" Coords= "100,100,200,200, 50, 50">
 

/Map>
 

Description of shape attributes:

Rect:

Defines a rectangular area. The coords attribute is set to the coordinates in the upper left corner and lower right corner. The coordinates are separated by commas.

Poly:

Defines a multi-border area. The coords attribute is set to the coordinate values of each vertex of a polygon.

Circle:

Defines a circular area. The coords attribute sets the value as the Center Coordinate and radius. The first two parameters are the center's horizontal and vertical coordinates, and the third parameter is the radius.