您的位置：首页 > Web前端 > HTML

HTML标签天天练8--<img><map><area>图像超链接

2012-03-08 11:36 956 查看

之前在 HTML标签天天练4 中，讲到了<a>标签超链接导向的使用方法。这一篇将针对性的学一下图像超链接：

1）<img>标签，用于给予图片一个链接，在点击图片后，导向另一个URL地址。如(复制到DW中尝试)：

<html>
<body>
<p>把图像作为链接来使用：
<a href="http://blog.sina.com.cn/yefeng9393">
<img border="0" src="http://portrait8.sinaimg.cn/2420127911/blog/180" />
</a>
</p>
</body>
</html>

——当我们需要给图片加一个文字解释的时候，需要加上alt或者title，当鼠标在图片上停留或浏览器不支持此图片的时候，就会显示该文字解释! 用这段代码代替上面同一个位置，即可得出此效果：

<img border="0" src="http://portrait8.sinaimg.cn/2420127911/blog/180" alt="夜风的小博" />

——当需要定义图片的尺寸的时候，还可以在后面添加上height和width属性，但要注意的是，不能把尺寸定义得比图片大太多，否则会造成模糊和失真：
<img border="0" src="http://portrait8.sinaimg.cn/2420127911/blog/180" alt="夜风的小博" height="200" width="200" />

2)<map>标签用于定义一个能让<area>标签产生作用的区域，并指定出name和id，如下面的代码：

<html>
<body>
<p>请点击图像上的链接，以便打开博客URL地址</p>
<img src="http://portrait8.sinaimg.cn/2420127911/blog/180" width="180" height="180"
border="0" usemap="#yefeng9393"
title="夜风的小博" />

<map name="yefeng9393" id="yefeng9393">

<area shape="rect" coords="41,106,180,189"
href="http://blog.sina.com.cn/yefeng9393"
target="_blank" title="请点击" />
</map>
<p>在图片上，定义了一个矩形范围，只要点击汽车的区域，就能够导向新的URL地址。</p>
<p>注意：在上面的img元素"usemap"属性同时向map元素添加了"id"与"name"属性，这样便于不同的浏览器都能够解释</p>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航