图像链接 与 图像映射 的区别

Posted Tina_xy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图像链接 与 图像映射 的区别相关的知识,希望对你有一定的参考价值。

既然是讲到图像,那就先介绍一下 html 中有关图像的元素:( 根据W3标准 ,元素不推荐的 属性 不做分析 )

  <img>元素------向网页中嵌入一幅图像

  img元素的属性:

  (1)src:图片来源URL。

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

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

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

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

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

  <map>元素------定义一个客户端图像映射( image-map )

  map元素的属性:

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

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

  注意:<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以应同时向 <map> 添加 id 和 name 属性。

  <area> 元素------定义图像映射中的区域

  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:和<a>标签的作用一样。

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

 

在熟悉以上三个元素之后,再来讨论图像链接 与 图像映射 的区别:

 

  图像链接:

  在图像上插入链接:点击图片,跳转页面:<a></a>之间插入<img/>元素.

  <a href="http://www.w3school.com.cn/">
     <img src="http://img4.3lian.com/sucai/img6/230/29.jpg" alt="Alternate Text">
   </a>

 

  图像映射:

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

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

  注意点:在<img>中设置usemap属性;在<map>中设置name属性。

  应用:

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

  <img src="http://scimg.jb51.net/allimg/150624/11-1506241135512L.jpg" alt="Animal"  usemap="#animalmap" width="200"  height="200"/>
  <map name="animalmap" id="animalmap">
     <area shape="rect" coords="0,0,200,200" href="http://www.w3school.com.cn/" target="_blank" alt="animal" />
   </map>

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

  <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
  <map name="planetmap" id="planetmap">
    <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" />
    <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />
    <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank"  alt="Sun" />
  </map>

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

  <img src="http://scimg.jb51.net/allimg/150624/11-1506241135512L.jpg" width="230" height="32" usemap="#click_enter"/>   
   <map name="click_enter" id="click_enter">  
        <area shape="rect" coords="9,9,64,28" alt="点击进入" href="http://www.w3school.com.cn" />  
   </map> 

 

常反思,常回顾,温故而知新!

 

以上是关于图像链接 与 图像映射 的区别的主要内容,如果未能解决你的问题,请参考以下文章

收藏|分享前端开发常用代码片段

图像热点&图像映射

一张图多个超链接

计算机视觉图像映射与全景拼接

OpenCV实战——图像运算详解

OpenCV实战——图像运算详解