1. 使用html的时候, 可以在文档中显示图像。
2. 图像标签
3. 图像标签(<img />)和源属性(src)
3.1. 在html中, 图像由<img />标签定义。
3.2. 要在页面上显示图像, 你需要使用源属性(src)。src指"source"。源属性的值是图像的URL地址。
3.3. 定义图像的语法是:
<img src="url" />
3.4. URL指存储图像的位置。如果名为"boat.gif"的图像位于www.w3school.com.cn的images目录中, 那么其URL为http://www.w3school.com.cn/images/boat.gif。
4. 替换文本属性(alt)
4.1. alt属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。<img src="boat.gif" alt="Big Boat" />
4.2. 在浏览器无法载入图像时, 替换文本属性告诉读者图像失去的信息。此时, 浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯, 这样有助于更好的显示信息, 并且对于那些使用纯文本浏览器的人来说是非常有用的。
4.3. src属性和alt属性是<img />标签的两个必需属性。
5. 图像标签属性
5.1. 必需的属性
5.2. 可选的属性
6. 图像标签例子
6.1. 代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>为图片显示替换文本</title>
</head>
<body>
<p>仅支持文本的浏览器无法显示图像, 仅仅能够显示在图像的"alt"属性中指定的文本。在这里, "alt"的文本是"向左转"。</p>
<p>请注意, 如果您把鼠标指针移动到图像上, 大多数浏览器会显示"alt"文本。</p>
<img src="eg_goleft.gif" alt="向左转" />
<p>如果无法显示图像, 将显示"alt"属性中的文本:</p>
<img src="eg_goleft123.gif" alt="向左转" />
</body>
</html>
6.2. 效果图
7. <area>标签
7.1. 定义和用法
7.1.1. <area>标签定义图像映射中的区域(注: 图像映射指得是带有可点击区域的图像)。
7.1.2. area元素总是嵌套在<map>标签中。
7.1.3. 注释: <img>中的usemap属性可引用<map>中的id或name属性(由浏览器决定, 一般用id), 所以我们需要同时向<map>添加id和name两个属性。
7.2. <area>属性
7.2.1. 必需的属性
7.2.2. 可选的属性
8. <map>标签
8.1. 定义和用法
8.1.1. 定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。
8.2. <map>属性
8.2.1. 必需的属性
8.2.2. 可选的属性
9. 图像映射例子
9.1. imgae_map_area.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>行星</title>
</head>
<body>
<p>请点击图像上的星球, 把它们放大。</p>
<img src="eg_planets.jpg" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" target ="_blank" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" target ="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" target ="_blank" alt="Sun" />
</map>
<p><b>注释: </b>img元素中的"usemap"属性引用map元素中的"id"或"name"属性(根据浏览器), 所以我们同时向map元素添加了"id"和"name"属性。</p>
</body>
</html>
9.2. sun.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>太阳</title>
</head>
<body>
<img src="eg_sun.gif" width="99px" height="98px" alt="sun" />
</body>
</html>
9.3. mercur.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>水星</title>
</head>
<body>
<img src="eg_mercur.gif" width="100px" height="100px" alt="mercur" />
</body>
</html>
9.4. venus.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>金星</title>
</head>
<body>
<img src="eg_venus.gif" width="100px" height="100px" alt="venus" />
</body>
</html>
9.5. 效果图