学习小结20150823--创建图像映象

<span style="font-size:18px;"><img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /><map name="planetmap" id="planetmap">  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /></map></span>

<span style="font-size:18px;"><img src="http://img.blog.csdn.net/20150823182228587?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></span>

一、<img> 标签

<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

<img> 标签的 src 属性是必需的。它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。

1、必需的属性

属性

值

描述

alt

text

规定图像的替代文本。

src

URL

规定显示图像的 URL。

 

--src属性值

值

描述

URL

规定图像的 URL。

可能的值：

· 绝对 URL - 指向其他站点（比如 src="http://www.example.com/"）

· 相对 URL - 指向站点内的文件（比如 src="/i/image.gif"）

--alt属性

假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：

· 网速太慢

· src 属性中的错误

· 浏览器禁用图像

· 用户使用的是屏幕阅读器

<img> 标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。

值

描述

text

规定图像的替代文本

alt 文本的使用原则：

· 如果图像包含信息 - 使用 alt 描述图像

· 如果图像在 a 元素中 - 使用 alt 描述目标链接

· 如果图像仅供装饰 - 使用 alt=""

2、可选的属性

属性

值

描述

align

· top

· bottom

· middle

· left

· right

不推荐使用。规定如何根据周围的文本来排列图像。

border

pixels

不推荐使用。定义图像周围的边框。

height

· pixels

· %

定义图像的高度。

hspace

pixels

不推荐使用。定义图像左侧和右侧的空白。

ismap

URL

将图像定义为服务器端图像映射。

longdesc

URL

指向包含长的图像描述文档的 URL。

usemap

URL

将图像定义为客户器端图像映射。

vspace

pixels

不推荐使用。定义图像顶部和底部的空白。

width

· pixels

· %

设置图像的宽度。

 

3、usemap属性

usemap 属性将图像定义为客户端图像映射。图像映射指的是带有可点击区域的图像。

 

usemap 属性与 <map> 元素的 name 或 id 属性相关联，以建立 <img> 与 <map> 之间的关系。

 

值

描述

#mapname

# + 要使用的 <map> 元素的 name 或 id 属性

 

usemap 客户端处理图像映射的好处是，它不要求有服务器或特殊的服务器软件，与 ismap 机制不同，

它可以用在非 web （无网络）环境中，例如在本地的文件或者 CD-ROM 中使用。

二、<map> 标签

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。

属性

值

描述

id

unique_name

为 map 标签定义唯一的名称。

 

属性

值

描述

name

mapname

为 image-map 规定的名称。

 

 

三、<area> 标签

<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。

area 元素总是嵌套在 <map> 标签中。

<img> 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。

<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性（由浏览器决定），所以我们需要同时向 <map> 添加 id 和 name 两个属性。

 

1、必需的属性

属性

值

描述

alt

text

定义此区域的替换文本。

2、可选的属性

属性

值

描述

coords

坐标值

定义可点击区域（对鼠标敏感的区域）的坐标。

href

URL

定义此区域的目标 URL。

nohref

nohref

从图像映射排除某个区域。

shape

· default

· rect

· circ

· poly

定义区域的形状。意味着该区域覆盖整个图像

矩形

圆形

多边形

target

· _blank

· _parent

· _self

· _top

规定在何处打开 href 属性指定的目标 URL。

3、coords属性的定义和用法

coords 属性定义客户端图像映射中对鼠标敏感的区域的坐标x 和 y 坐标。

coords 属性与 shape 属性配合使用，来规定区域的尺寸、形状和位置。

 

坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。（图像左上角的坐标是 "0,0"。）

 

 

下面列出了每种形状的适当值：

 

圆形：shape="circle"，coords="x,y,z"

这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像素为单位的圆形半径。

矩形：shape="rectangle"，coords="x1,y1,x2,y2"

第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0" 是图像左上角的坐标。请注意，定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。

多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."

每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。

多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。

值

描述

x1,y1,x2,y2

如果 shape 属性设置为 "rect"，则该值规定矩形左上角和右下角的坐标。

x,y,radius

如果 shape 属性设置为 "circ"，则该值规定圆心的坐标和半径。

x1,y1,x2,y2,..,xn,yn

如果 shape 属性设置为 "poly"，则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。