HTML图像_它有局部属性: src,alt,height,width,usemap,ismap 。-优快云博客

本文介绍了HTML中图像的基本用法及属性，并详细讲解了如何使用图像映射创建客户端图像映射，包括矩形、圆形或多边形区域的定义。

转载出自：http://www.w3cschool.cn/html/html-css-image.html

HTML图像

img元素允许您将图像嵌入到HTML文档中。

它有局部属性:src，alt，height，width，usemap，ismap。

HTML5中的border，longdesc，name，align，hspace和vspace属性已过时。

要嵌入图像，您需要使用src和alt属性，如下所示。

<!DOCTYPE HTML>
<html>
<body>
  <img src="http://www.www.w3cschool.cn/style/download.png" 
       alt="Triathlon Image" 
       width="200" 
       height="67" />
</body>
</html>

点击查看实例

src属性指定图像的URL。

如果无法显示图片，则alt属性定义内容。

width和height属性设置图像大小(以像素为单位)。

图像链接

img元素的常见用途是结合a元素创建基于图像的超链接。

以下代码显示了如何使用img和a元素。

<!DOCTYPE HTML>
<html>
<body>
  <p>
    <a href="//www.w3cschool.cn/page.html">
       <img ismap src="http://www.www.w3cschool.cn/style/download.png"/>
    </a>
  </p>
</body>
</html>

点击查看实例

如果将ismap属性应用于img元素，则可以创建服务器端图像映射，这意味着您在图像上单击的位置将附加到URL。

例如，如果您从图像的顶部点击了4个像素，从左边缘点击了10个像素，浏览器将导航到以下内容：

//www.w3cschool.cn/page.html?10,4

客户端图像映射

您可以创建客户端图像映射：单击图像中的不同区域会导致浏览器导航到不同的URL。

客户端图像映射的关键元素是map与局部属性name。

如果使用id属性，它必须具有与name属性相同的值。

map元素可以有一个或多个area元素。

每个区域元素标记图像中可以点击的区域。

area元素具有局部属性:alt，href，target，rel，media，hreflang，type，shape，coords。

rel，media和hreflang属性是HTML5中的新特性。nohref属性现在已过时。

href - 点击区域时浏览器应加载的网址
alt - 替代内容。请参阅img元素上的相应属性。
target - 应显示网址的浏览内容。
rel - 描述当前文档和目标文档之间的关系。
media - 区域有效的介质。
hreflang - 目标文档的语言。
type - 目标文档的MIME类型。

shape和coords属性一起工作。coords属性取决于shape属性的值。

rect
该值表示矩形区域。
coords属性必须由四个逗号分隔的整数组成，表示与以下内容的距离：
- 图像左边缘到矩形左边
- 图像顶边到矩形顶边
- 图像左边缘到矩形右边
- 图像顶边到矩形底边
circle
该值表示圆形区域。
coords属性必须由三个逗号分隔的整数组成，表示以下内容：
- 从图像左边缘到圆心的距离
- 从图像顶边缘到圆心的距离
- 圆的半径
poly
此值表示多边形。
coords属性必须至少为六个逗号分隔的整数，每对表示多边形上的一个点。
default
此值是默认区域，覆盖整个图像的其余部分。
将此值用于shape属性时，不需要坐标值。

以下代码显示如何使用图像映射。

<!DOCTYPE HTML>
<html>
<body>
  <p>
    <img src="http://www.www.w3cschool.cn/style/download.png" usemap="#mymap"/>
  </p>
  <map name="mymap">
    <area href="a.html" shape="rect" coords="3,5,68,62" alt="test a" />
    <area href="b.html" shape="rect" coords="70,5,130,62" alt="test b" />
    <area href="c.html" shape="default" alt="test c" />
  </map>
</body>
</html>