<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>2.1.6保留-图像相关元素</title>
</head>
<body>
<p>
HTML5保留了img元素在页面中定义图像,这个元素只能是一个空元素,它不可以包含任何内容。<br>
该元素可以指定id、class、style等核心属性,还可以指定onclick等事件属性。<br>
不仅如此,使用该元素必须指定如下两个属性:<br>
1、src:该属性指定图片文件所在的位置,该属性既可以是相对路径,也可以是绝对路径。<br>
2、alt:该属性指定一段文本,该文本将作为该图片的提示信息。<br><br>
除此之外,该元素还可以指定如下两个可选属性。<br>
1、height:指定该图片的高度,该属性值可以是百分比,也可是像素值。<br>
2、width:指定该图片的宽度,该属性值可以是百分比,也可是像素值。<br><br>
除此之外,与图片相关的还有如下两个标签:<br>
1、map:用于定义图片映射。该元素主要可以包含一个或多个area子元素,每个area子元素定义一个区域,
不同区域可链接到不同URL。<br>
2、area:用于定义图片映射的内部区域。该元素只能是一个空元素。<br>
该元素可以指定id、class、style等核心属性,还可以指定onclick等事件属性,
还可以指定onfocus、onblur等焦点相关属性。
<blockquote>
除此之外,还可以指定如下几个属性:<br>
1.shape:指定该内部区域是哪种区域,该属性的默认值是"rect",即矩形区域;
除此之外,还可以是circle和ploy,分别代表圆形区域和多边形区域。<br>
2.coords:指定多个坐标值,用于确定区域位置。<br>
3.href:用于确定该区域所连接的资源。<br>
4.alt:该属性指定一段文本,该文本将作为该图片的提示信息。<br>
5.target:指定使用框架集中的哪个框架来装载另一个资源。<br>
该属性的值可以是_self、_blank、_top、_parent四个值,
分别代表使用自身、新窗口、顶层框架、父框架来装载新资源。<br>
6.media:指定目标URL所引用的媒体类型。默认值是all。只有当制订了href属性时该属性才有效。<br>
</blockquote>
</p>
<p>
一旦我们使用map元素定义了图片映射之后,就可以让指定图片使用该图片映射,
通过为img元素指定usemap属性让该图片使用图片映射,设置usemap属性值为#mapname即可。
</p>
<p>
事例:<br>
1、<img src="images/logo.jpg" alt="疯狂Java的logo"/><br><br>
2、定义图片,指定高、宽<br>
<img src="images/logo.jpg" width="300" height="120" alt="疯狂Java的logo"/><br><br>
3、定义图片,使用指定的图片映射<br>
<img src="images/logo.jpg" border="0" usemap="#test" alt="疯狂Java的Logo" /><br /><br />
4、定义图片映射<br>
<map name="test" id="test">
<!-- 为该图片映射定义2个区域 -->
<area shape="circle" coords="57,55,25"
href="http://www.baidu.com" alt="baidu" />
<area shape="poly" coords="188,28,185,50,200,74,224,72,246,51"
href="http://www.fkjava.org" alt="fkjava.org" />
</map>
</p>
</body>
</html>
08-16