製作影像地圖(image-map)

<map> tag:

--> used to define a client-side image-map.

--> The required name attribute of the <map> element is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.

HTML <map> Tag:

http://www.w3schools.com/TAGs/tag_map.asp

<area> tag:

--> The <area> tag defines an area inside an image-map

--> The <area> element is always nested inside a <map> tag.

HTML <area> Tag:

http://www.w3schools.com/TAGs/tag_area.asp

coords attribute:

--> specifies the coordinates of an area in an image-map.

--> used together with the shape attribute to specify the size, shape, and placement of an area.

--> The coordinates of the top-left corner of an area are 0,0.

如何使用coord attribute呢?

這篇文章有教我們如何畫"方形"、"圓形"、"多邊形" (所以只需看那部分就好),

HTML Image Map 影像地圖設計:

http://www.webtech.tw/info.php?tid=HTML_Image_Map_%E5%BD%B1%E5%83%8F%E5%9C%B0%E5%9C%96%E8%A8%AD%E8%A8%88

注意: 文章中關於如何畫多邊形(不規則)那邊語法有寫錯:

<img src="背景圖片網址" width="500" height="200" usemap="#ImageMap03">

<map name="ImageMap03">

　<area shape="polygon" coords="73,86,97,136,174,132,130,40" href="#">

</map>

--> 上面的shape="polygon", 應改為: shape="poly"