html5 超链接 图像映射,链接图像

所谓链接图像，既是链接，也是图像。在网页制作的时候，常常会给网页上的某些图片添加一个超链接，当用户点击该图片时，浏览器立即转入该超链接所指向的地址。

中文名

链接图像

外文名

Linking images

基本释义

带有链接的图像归属学科

计算机技术

相    关

应    用

网页制作

链接图像HTML 超链接(链接)

编辑

语音

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 标签在 HTML 中创建链接。

有两种使用 标签的方式：

通过使用 href属性 - 创建指向另一个文档的链接

通过使用 name 属性 - 创建文档内的书签[1]

链接图像基础概念

编辑

语音

链接图像元素------向网页中嵌入一幅图像

img元素的属性：

(1)src：图片来源URL。

(2)alt:规定图像的替代文本。

(3)height和width:单位为像素，如果不指定，则为默认；如果只指定height或width，则自动调整大小。

(4)ismap ：将图像定义为服务器端图像映射。

(5)usemap：将图像定义为客户器端图像映射。

(6)longdesc： 指向包含长的图像描述文档的 URL。

链接图像元素-

-----定义一个客户端图像映射

map元素的属性：

(1) id:为 map 标签定义唯一的名称。

(2)name:为 image-map 规定的名称。

注意：中的 usemap 属性可引用 中的 id 或 name 属性(取决于浏览器)，所以应同时向 添加 id 和 name 属性。

链接图像 元素

------定义图像映射中的区域

area元素的属性：

(1)alt:规定图像的替代文本。

(2)shape：用于描述区域的形状，rect\poly\circle\default可选,default指的是还没有被定义的区域。

(3)coords：指定区域的坐标。比如矩形有4个坐标，前两个是左上角的x,y坐标，后两个是右下角的x,y坐标。

(4)href和nohref：href指定目的的链接，如果不指定href属性，则需要指定nohref，nohref="nohref"

(5)target：和标签的作用一样。

注意：area 元素永远嵌套在 map 元素内部。

链接图像图像链接：

编辑

语音

在图像上插入链接：点击图片，跳转页面：之间插入元素。

       

链接图像局部图像链接

编辑

语音

在某种情况下，我们不希望整张图片加链接。希望的效果是：点击图片某个区域，链接到某地址。

    

coords="9,9,64,28"

alt="排行利用"

href="UseingCounter?subAction=init" />

链接图像图像映射

编辑

语音

服务器端图像映射：将点击的坐标发送给服务器，由服务器的脚本来决定。(ismap)

客户端图像映射：根据点击位置不同确定链接目的。(usemap) (此处只分析客户端图像映射)

注意点：在中设置usemap属性；在中设置name属性。[2]

应用：

1) 整张图片映射同一个区域(此时和图片链接没有什么差异)

　

2)整张图片映射到几个不同的区域 ( 几个区域就有几个area )

　

3)给图片局部区域加链接

     

参考资料

1.

HTML 链接

．w3school[引用日期2017-06-14]

2.

钟浪辉. Web页面中的图像映射[J]. 计算机与现代化, 1999(4):75-77.