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

中文名

链接图像

外文名

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.

html5 超链接 图像映射,链接图像相关推荐

  1. HTML5超链接和多媒体,IT兄弟连 HTML5教程 多媒体应用 创建图像和链接

    原标题:IT兄弟连 HTML5教程 多媒体应用 创建图像和链接 指引 多媒体来自多种不同的格式.它可以是您听到或看到的任何内容,文字.图片.音乐.音效.录音.电影.动画等等.在因特网上,您会经常发现嵌 ...

  2. html 图像映射(一个图像多个连接)

    以前就见过那种导航地图,点击地图的不同省份分别跳到不同的连接,现在用html实现一下,简单的. 图像映射是指一个图像可以建立多个连接,就是在图像上面定义多个区域,每个区域连接到不同的地址. 效果如图: ...

  3. 图像映射——计算机视觉

    图像映射 图像映射就是图像之间的变换,加上使用一些计算变换的方法.可以实现图像扭曲变形和图像配准,适用于全景拼接.普遍变换方法有单应性变换.仿射变换.阿尔法通道等等.图像的映射类型有:平移.旋转.仿射 ...

  4. html5图像映射坐标怎么看,html学习之创建图像映射

    作为一名才接触html一个礼拜的人来说,我确实是一只初级菜鸟,不过,我相信在我不断的积累下,365天后,我会有所突破,成功在于积累.沉淀,让我们为了明天,努力,加油! 今天在通过前几天的积累后,终于接 ...

  5. html5图像映射坐标怎么看,如何将AxesImage中的坐标映射到已保存图像文件中的坐标?...

    这是尝试从matplotlib获取精确像素值的更令人困惑的部分之一. Matplotlib将绘制精确像素值的渲染器与绘制图形和轴的画布分开. 基本上,最初创建(但尚未显示)图形时存在的渲染器不一定与显 ...

  6. 用于定义图像热区的html标记是,html 图像热区链接

    图像热区链接 除了对整幅图像设置超链接外,还可以将图像划分为若干区域,这叫做"热区",每个区域可设置不同的超链接.此时,包含热区的图像可以称为映射图像. 要进行热区设置,首先需要在 ...

  7. 用html给一张图片做多个热区链接,html 锚点链接 图像热区链接

    锚点链接 图像热区链接 除了对整幅图像设置超链接外,还可以将图像划分为若干区域,这叫做"热区",每个区域可设置不同的超链接.此时,包含热区的图像可以称为映射图像. 要进行热区设置, ...

  8. 使用IIS网址重写来阻止图像热链接,渗漏和邪恶Splogger

    I recently discovered that a blog called (seriously) "Google Chrome Browser" was rebloggin ...

  9. 【python】图像映射:单应性变换与图像扭曲

    [python]图像映射:单应性变换与图像扭曲 单应性变换(Homography) 图像扭曲(仿射变换) 图中图 分段仿射扭曲 单应性变换(Homography) 单应性变换(Homography)即 ...

最新文章

  1. RabbitMQ和kafka从几个角度简单的对比--转
  2. Vue指令练习实例-学生信息录入
  3. python代码写入方式_【Python 1-17】Python手把手教程之——文件的读写以及I/O操作...
  4. 宝典9.2——海量数据的基本处理方法
  5. DevOps工程师到底是做什么的?
  6. java初始化例子_Java 非静态初始化的例子
  7. java怎么复制别人的数据库_java-如何在不使用Apache DDLUtils的情况下使用JDBC将模式从一个数据库复制到另一个数据库?...
  8. 现代软件工程讲义 2 开发技术 - 单元测试 amp; 回归测试
  9. 简单的form表单操作(Servlet)
  10. jsp测试mysql_求一段jsp连接mysql的测试程序
  11. iso12233测试方法_ISO12233图像分辨率测试卡的使用方法
  12. 机器学习笔记(李宏毅 2021/2022)——第一节:基本概念
  13. Ubuntu返回上级目录快捷键
  14. C语言程序设计勾股数,打印出100内的所有的勾股数(用C语言实现)
  15. [GYCTF2020]Easyphp
  16. http://fonts.googleapis.com/css?打开很慢解决方案
  17. 接入层交换机、汇聚层交换机和核心层交换机的区别
  18. Java学习笔记(五):一张图总结完JVM8基础概念
  19. 【Python】单样本、独立样本、配对样本的t检验
  20. kubectl logs 常用命令

热门文章

  1. 函数指针 和 函数指针数组 和 函数指针数组
  2. 1 常用Windows命令大全
  3. VBA调用bat,doc 命令行 窗口关闭之后,VBA代码 再继续执行
  4. CSS webkit
  5. 关于IT测试中的一些问题。
  6. 数据库的时间格式(毫秒表示)
  7. 【Python】BeautifulSoup导入lxml报错
  8. 【Oracle】DataGuard中 Switchover 主、备切换
  9. IntelliJ Cannot find declaration to goto----解决方案
  10. js中精度问题以及解决方案