posts - 262,  comments - 221,  trackbacks - 0
一、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>
<href="tryhtml_ismap.htm">
   
<img src="planets.gif" ismap width="146" height="126">
</a>
</p>

</body>
</html>

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


-------------------------------------------------------------
生活就像打牌,不是要抓一手好牌,而是要尽力打好一手烂牌。
posted on 2008-06-16 22:17 Paul Lin 阅读(435) 评论(0)  编辑  收藏 所属分类: Web基础

只有注册用户登录后才能发表评论。


网站导航:
 
<2008年6月>
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345

常用链接

留言簿(21)

随笔分类

随笔档案

BlogJava热点博客

好友博客

搜索

  •  

最新评论

阅读排行榜

评论排行榜