HTML教程——map和area

这次来谈谈HTML的map和area。
这是用来把网页上的图片分割成几个可以被点击打开链接的部分。
例子：
<img src="http://www.janwillemtulp.com/wp-content/uploads/2009/07/pie_chart_2d.png" width="300" height="300" alt="Planets" usemap="#pic"/> <map name="pic"> <area shape="circle" coords="75,75,50" href="http://cforum.ucpro.my/" alt="Blue"/> <area shape="circle" coords="185,75,50" href="http://cforum.ucpro.my/" alt="Green"/> <area shape="rect" coords="20,160,150,280" href="http://cforum.ucpro.my/" alt="Red"/> <area shape="rect" coords="150,150,260,260" href="http://cforum.ucpro.my/" alt="Yellow"/> </map>

要使用map，必须先加入img，并为其usemap attribute设定参考map的名称（名称前加上#）

map所支援的attribute：
name——设定map的名称。

area是用来将图片分割成数个面积的element。

area所支援的attribute：
alt——设定当滑鼠在图片部分上时应显示的说明文字。

shape——设定area的形状。接受数值为：default, rect, circle, poly.

coords——设定area的准确位置。
如果shape是rect，那么接受数值为：x1,y1,x2,y2（x1,y1为左上角位置，x2,y2为右下角位置）
如果shape是circle，那么接受数值为：x,y,radius（x,y为中心点位置，radius为半径大小）
如果shape是poly，那么接受数值为：x1,y1,x2,y2,..,xn,yn（设定每个角点的位置）

map和area共同支援的attribute：
id——设定独特的id让JavaScript辨别。

class——设定class的名称，通常用在CSS。

map和area共同支援的event handler：
onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup.