HTML 图片映射<map>标签整理

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/78553748

背景

  • 今天涉及到一个知识点的学习,就是在大流量的今天,尽可能减少HTTP的资源请求数目,以保证页面的加载速度,所以牵扯到了图片映射这个概念,简作整理…

概念

  • 定义和用法 定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。
  • 优势 热点链接可以帮你解决。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。
  • 使用 需要使用HTML的<img>标签、<map>标签和<area>标签
  • 提示和注释: 注释:area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。 注释:<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向<map> 添加 id 和 name 属性。

使用技巧

(1).标签书写规范

<img src="图形文件名" usemap="#图的名称">
     <map name="图的名称">
     <area shape=形状 coords=区域座标列表 href="URL资源地址">
      <!--可根据需要定义多少个热点区域-->
      <area shape=形状 coords=区域座标列表 href="URL资源地址">
     </map>

(2). <map> 标签属性介绍:

属性

取值

描述

coords

坐标值

定义可点击区域(对鼠标敏感的区域)的坐标

href

URL

定义此区域的目标 URL

shape

default,rect(矩形),circle(圆形),poly(多边形)

定义热点形状

target

_blank,_parent,_self,_top

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

(3). coords – 定义区域点的坐标

  • a.矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标 例:<area shape=rect coords=100,50,200,75 href="URL">
  • b.圆形:必须使用三个数字,前两个数字为圆心的座标,最后一个数字为半径长度 例:<area shape=circle coords=85,155,30 href="URL">
  • c.任意图形(多边形):将图形之每一转折点座标依序填入 例:<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
  • d. 注释:如果某个 area 标签中的坐标和其他区域发生了重叠,会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。

示例代码

  • 对下面的一张图片,选取了四个圆形区域,做了热点定位.
<img src="__MIMG__/img_map.png" 
     id="img_map" style="width: 869px" 
     border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
    <area shape="circle" coords="95,98,98"  alt="man" />
    <area shape="circle" coords="322,98,98"  alt="maze" />
    <area shape="circle" coords="548,98,98"  alt="$$" />
    <area shape="circle" coords="772,98,98"  alt="star" />
</map>

附录

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

SVG图形绘制入门第一弹

之前很长一段时间,我是不重视SVG的,认为他就是在AI里画画,然后导出来做个矢量图标。直到我在上家公司遇到图表的绘制,因为不会写不得已而拿插件实现,而插件绘制的...

2997
来自专栏Java与Android技术栈

图像中二维码的检测和定位

所谓开操作是指先腐蚀后膨胀的操作。在之前的文章二值图像分析:案例实战(文本分离+硬币计数)曾经介绍过开操作的用途。

2473
来自专栏Python小屋

Python实现批量图片添加数字水印

之前写过一个类似的代码,是把水印信息打散以后随机添加到原图中,并提供了水印信息的提取功能,请参考:Python实现图像空域随机水印加入与提取。本文代码功能:为指...

4243
来自专栏Java后端技术

Web上的支持的图片格式以及它们之间的区别

871
来自专栏smy

css sprite 调整大张图片中小图标的大小

直接说解决方法: ? 假设一张拼合好的大图大小是:900 x 1000 px (如上图) 现在想取图中左上角的河马图标,并缩小图标的大小。 正常取图: .spr...

3905
来自专栏Petrichor的专栏

opencv: cv2.rectangle 通过确定对角线 画矩形

在做项目的过程中,标记数据是记录每个 bounding box 的左上角和右下角坐标。因为用到了数据增强,所以我有了一个疑虑:

2412
来自专栏我的python

python数据可视化之画箱形图

最近接到锅让画几个数据图。其实第一反应是用origin来画图,但问了一圈周围没有用Origin画过箱形图的,有些问题无法解决又百度不到。但好在略懂一点pytho...

2.2K0
来自专栏电光石火

HTML条件注释判断浏览器及检验

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![endif]--> ...

4039
来自专栏九彩拼盘的叨叨叨

前端学习 第1周 第5天

925
来自专栏腾讯NEXT学位

药药切克闹!用酷炫的vue~制作酷炫的menu~

4075

扫码关注云+社区

领取腾讯云代金券