posts - 100,  comments - 54,  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 阅读(106) 评论(0)  编辑  收藏 所属分类: Web基础

标题  
姓名  
主页
验证码 *  
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2008-06-16 22:25 编辑过
 
 

相关链接:
网站导航:



<2008年6月>
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345

常用链接

留言簿(4)

随笔分类

随笔档案

相册

BlogJava热点博客

好友博客

搜索

  •  

最新评论

阅读排行榜

评论排行榜

60天内阅读排行