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.html.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.html.cn/page.html"> <img ismap src="http://www.html.cn/style/download.png"/> </a> </p> </body> </html>
如果将 ismap 属性应用于 img 元素，则可以创建服务器端图像映射，这意味着您在图像上单击的位置将附加到URL。
例如，如果您从图像的顶部点击了4个像素，从左边缘点击了10个像素，浏览器将导航到以下内容：
www.html.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.html.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>
img 元素上的 usemap 属性将map元素与图像相关联。