<!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
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
