分类目录

统计信息

  • 日志总数:59篇
  • 评论总数:2条
  • 分类总数:9个
  • 标签总数:51个
  • 友情链接:3个
  • 网站运行:2926天

2018 年十二月
« 七    
 12
3456789
10111213141516
17181920212223
24252627282930
31  
现在位置:    首页 > 前端开发 > 正文
第3章 图像和对象(1)
前端开发 暂无评论

1

3.1 使用<img>元素添加图像

至少附带两个特性:src特性和alt特性,附带所有通用特性和UI事件特性外,还附带如下特性:src alt align border height width hspace vspace ismap usemap longdesc name

3.1.1 src特性:图像的地址,值是(相对或绝对)URL。

3.1.2 alt特性:必须有,值是对图像的文字描述:如图像无法显示,作为图像替代;为视力受损的人提供描述;帮助搜索引擎进行索引。

3.1.3 height特性和width特性:指定图像高度和宽度,值一般是像素。如是百分比则显示时容易变形。

3.1.4 align特性(弃用):在网页中对齐图像(或被包含于一个元素内,则在元素内对齐)。

3.1.5 border特性(弃用):指定图像或其他元素的边框,单位像素。被CSS中border属性替换。

3.1.6 hspace特性和vspace特性(弃用):用来控制图像周围的空白数量,被CSS中border属性或margin属性替换。

3.1.7 ismap特性和usemap特性:用于图像映射。

3.1.8 longdesc特性:用于指定包含图像详细描述的文档(或文档的某个部分)的URL。但多数浏览器不支持,一般加一个D链接来指定。

3.1.9 name特性(弃用):为图像指定一个名称,已被id替换。

3.2 使用图像作为链接

<a><img></a>

3.3 图像映射

图像映射(基于X,Y坐标,坐标起点左上角)应用于以下方面:

·标明热点的位置

·指出用户单击了图像的哪个区域

以下两类映射作用相同,区别在于如何识别单击的热点:

·客户端图像映射:浏览器识别用户单击了图像的哪个位置,并将用户转移到所链接的目标网页。

·服务器端图像映射:浏览器将用户单击位置的坐标发送给服务器,然后有服务器端的脚本文件处理这些坐标,以决定应当将用户转移到哪个网页。

3.3.1 客户端图像映射的创建:在<img>元素中使用<map><area>元素;在<object>元素中使用<map>元素。

1、使用<map>元素和<area>元素的客户端图像映射。用<img>插入图像,添加usemap属性,如usemap=”#abc”后面紧跟<map name=”abc”><area>用来标示映射区域。

a、shape特性:坐标方式,如缺失默认为矩形,default没有定义区域(最后使用),rectangle或rect矩形,polygon或poly多边形,circle或circ圆形。

b、coords特性:指定单点热点区域,矩形4个坐标,前2个左上角,后2个右下角;圆形3个坐标,前2个是圆心,第3个是半径;多边形1个顶点2个坐标值,最后不需要指定第1个坐标,图形会自动闭合。

c、href和nohref特性:指定热点区域链接的地址,或没有链接。

d、alt特性:定义区域的备选文本,鼠标悬停时显示。

e、target特性:指定网页被加载到哪个框架或窗口。<a>中的target特性相同。

f、tabindex特性:指定Tab键切换顺序,1~32767。

2、使用<object>元素的客户端图像映射:用object代替img,data代替src,<a>替代<area>。

3.3.2 服务器端图像映射:<a>后附带<img>,<img>带ismap属性。单击图像应是该特性向服务器发送鼠标所在区域的坐标,然后使用服务器的一个脚本基于得到坐标决定跳转目标。

本文版权归不读书的读书人所有,转载引用请完整注明以下信息:
本文作者:望岳
本文地址:第3章 图像和对象(1) | 不读书的读书人

发表评论

您必须 [ 登录 ] 才能发表留言!