img usemap attribute China map link

Author：Eve Cole Update Time：2025-05-06 09:16:01

html's img tag: defines an image to be introduced in a web page. It also has an usemap attribute that is very interesting.

Look at a map on the 51ditu homepage, and a map of China in the middle. Right-click to download it and see a normal picture.

But clicking on provinces on the map can start different events (or opening different links), which is very interesting. It turns out that the usemap attribute is used.

Of course, you also need to define a map tag. The entire code is as follows:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>img usemap attribute</title> </head> <body> <img src="http://img.VeVb.com/maps/chinamap.gif" usemap="#Map"/> <map name="Map"> <area shape="rect" coords="73,87,103,104" href="javascript:alert('Xinjiang')"> <area shape="rect" coords="144,125,173,142" href="javascript:alert('Qinghai')"> <area shape="rect" coords="84,158,115,175" href="javascript:alert('Tibet')"> <area shape="rect" coords="220,90,257,105" href="javascript:alert('Inner Mongolia')"> <area shape="rect" coords="348,45,389,61" href="javascript:alert('Heilongjiang')"> <area shape="rect" coords="346,68,371,83" href="javascript:alert('Jilin')"> <area shape="rect" coords="323,84,351,100" href="javascript:alert('Liaoning')"> <area shape="rect" coords="298,100,326,114" href="javascript:alert('Tianjin')"> <area shape="rect" coords="288,120,314,136" href="javascript:alert('Shandong')"> <area shape="rect" coords="268,107,295,121" href="javascript:alert('Hebei')"> <area shape="rect" coords="207,116,235,130" href="javascript:alert('Ningxia')"> <area shape="rect" coords="186,162,214,179" href="javascript:alert('Sichuan')"> <area shape="rect" coords="256,142,281,157" href="javascript:alert('Henan')"> <area shape="rect" coords="305,144,332,159" href="javascript:alert('Jiangsu')"> <area shape="rect" coords="320,162,342,177" href="javascript:alert('Shanghai')"> <area shape="rect" coords="216,168,243,185" href="javascript:alert('Chongqing')"> <area shape="rect" coords="250,162,277,177" href="javascript:alert('Hubei')"> <area shape="rect" coords="283,161,308,177" href="javascript:alert('Anhui')"> <area shape="rect" coords="213,196,239,209" href="javascript:alert('Guizhou')"> <area shape="rect" coords="243,183,269,198" href="javascript:alert('Hunan')"> <area shape="rect" coords="273,185,299,200" href="javascript:alert('Jiangxi')"> <area shape="rect" coords="308,177,334,193" href="javascript:alert('Zhejiang')"> <area shape="rect" coords="179,210,204,225" href="javascript:alert('Yunnan')"> <area shape="rect" coords="227,214,252,228" href="javascript:alert('Guangxi')"> <area shape="rect" coords="231,248,257,263" href="javascript:alert('Hainan')"> <area shape="rect" coords="292,200,319,214" href="javascript:alert('Fujian')"> <area shape="rect" coords="259,219,287,231" href="javascript:alert('Guangdong')"> <area shape="rect" coords="244,231,270,246" href="javascript:alert('Macau')"> <area shape="rect" coords="276,232,304,248" href="javascript:alert('Hong Kong')"> <area shape="rect" coords="311,228,338,243" href="javascript:alert('Taiwan')"> <area shape="rect" coords="272,90,302,107" href="javascript:alert('Beijing')"> <area shape="rect" coords="196,130,222,145" href="javascript:alert('Gansu')"> <area shape="rect" coords="246,116,272,130" href="javascript:alert('Shanxi')"> <area shape="rect" coords="224,136,252,151" href="javascript:alert('Shaanxi')"> </map> </body> </html>

Several attribute meanings of the area tag in the map tag are: http://www.w3school.com.cn/tags/tag_area.asp

Here we will also note the shape attribute of area, which can be selected from rectangles, circles and polygons. It is especially important to note that the coords attribute must be used in combination with shape. The coordinates in the upper left corner of the image are 0,0.