HTML重点知识温习【五】

HTML重点知识温习【五】

一、HTML中的<usemap>和<map>、<area>：

HTML中的<map>元素用于定义热点区域，通过给一幅图像定义热点区域，在用户点击不同的区域后会触发不同的反应。请看下面的例子

< html >
< body >

< p >
Click on one of the planets to watch it closer:
</ p >

< img  src ="planets.gif" width ="145"  height ="126"  usemap="#planetmap" >

< map  id ="planetmap"  name ="planetmap" >

    < area  shape ="rect"     coords="0,0,82,126"  alt ="Sun" href ="sun.htm" >

    < area  shape ="circle"   coords="90,58,3"  alt ="Mercury" href ="mercur.htm" >

    < area  shape ="circle"   coords="124,58,8"  alt ="Venus" href ="venus.htm" >

</ map >

< p >< b > Note: </ b >  The "usemap" attribute in the img element refers to the "id" or "name" (browser dependant) attribute in 
the map element, therefore we have added both the "id" and "name" attributes to the map element. </ p >

</ body >
</ html >

上面的例子中首先为图片planets.gif指定了热点区域planetmap(通过属性usemap="#planetmap"指定)，接着通过<map>元素定义了热点区域(通过id="planetmap"使用)。最后在<area>元素中定义了各个热点的坐标，以及链接地址。

当我们把鼠标移到到热点定义的区域内时，我们可以在浏览器的状态栏上看到不同的URL链接地址。

二、HTML中的<ismap>：

HTML中的<ismap>元素使到表单提交时，会在URL后面接上一对以","分隔的数值，如index.htm?60,60。

< html >
< body >

< p >
Move the mouse over the image, and look at the status bar to see how the
coordinates change.
</ p >

< p >
< a  href ="tryhtml_ismap.htm" >
    < img  src ="planets.gif" ismap width="146"  height ="126" >
</ a >
</ p >

</ body >
</ html >

当我们把鼠标移到到图像的不同位置时，我们可以在浏览器的状态栏上看到在URL后面带有一对数值，以逗号分隔。

-------------------------------------------------------------
生活就像打牌，不是要抓一手好牌，而是要尽力打好一手烂牌。