HTML对图片的控制--1
? 基本语法:
? <img src=“图片名称”>
? 引用图片必须用<img>元素标志。<img>元素下的基本元素属性是src属性,src的属性值为所引用的图片的URL地址。
? src属性是必须的。Src的URL可以是绝对地址,也可以是相对地址
? 所谓图片的替代文本,指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。
? 定义图片替代文本的方法是:
? <img src=“图片名称” alt=“这是一张图片”>
? 图片的显示大小
我们可以指定一幅图片在浏览器窗口里的显示大小。
– 定义图片的显示大小的方法是:
<img src="sample.jpg" width=100 height=100 >
– width指定图片的宽度,height指定高度。它们的属性值可以是象素,也可以是%。
– 图片的边框
– 我们可以为一幅图片加一个边框以突出显示:
– <img src="sample.jpg" border= " 2 " >
– border的属性值为象素数
? 图片的对齐方式
图片可以相对于页面或单元格有一个对齐方式。
定义水平对齐方式的方法是:
– <img src=“sample.jpg” align=“left” >
– <img rc=“sample.jpg” align=“right”>
– 图片的对齐方式
定义图片的垂直对齐方式:
<img src="sample.jpg" align="top" >
<img src="sample.jpg" align="middle">
<img src="sample.jpg" align="bottom" >
对于图片的对齐方式不仅是以上几种,但是以上的几种是最常用的。
? 定义图片与左、右的文本之间的间距
– 图片在显示时,与左右的文本之间可以有一定的间距
<img src="sample.jpg" hspace=5 vspace=5 >
– Hspace(horizontal)定义水平间距; Vspace(vertical)定义垂直间距。单位都是象素数.
? 图象的超级链接
– 图象的超级链接是指整个图象的超级链接,当点击图象的任何部分时,都会打开这个超级链接。定义默认超级链接的方法是:
<a href=“http://www.enet.com.cn/eschool”><img src="sample.jpg" ></a>
– 所以,所谓超级链接实际上就是用<a>元素标志一个图象的引用;
– 图象映射
所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接;点击图片的不同位置会打开不同的超级链接目标。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。
? 图象映射(只要求理解标记含义)
– 图象映射由<map>定义。<map>有一个基本属性是name。Name给图象映射命名,这个命名将会被<img>元素用usemap属性引用。所以,图象上的图象映射实际上是对<map>定义的映射的一个引用。
– <map>在定义图象映射时,可以定义三种形状的映射: circle(圆形)、rect(矩形rectangle)、poly(多边形)
? 图象映射实例(35.htm)
<img src="bear.jpg" usemap="#Map" >
<map name=“Map">
<area shape="rect" coords="46,29,253,164" href="#" >
<area shape="circle" coords="76,510,59" href="#" >
<area shape="poly" coords="219,482,253,448,310,462,297,527,220,523" href="#" >
</map>