前端图片热区的使用

男娘i 2022-12-08 04:28 193阅读 0赞

最近学习了图片热区，相信大家对热区的定位还存在疑惑，下面我将简单介绍一下它的使用

1.  **首先贴出它的代码**

//热区
    <img src="unite.jpg" usemap="#mymap">
      <map name="mymap" id="mymap">
        <area shape="circle" coords="75,75,75" alt="圆形热区" href="">
        <area shape="rect" coords="10,160,150,280" alt="" href="矩形热区">
        <area shape="poly" coords="25,20,112,20,112,50,25,50" alt="多边形热区" href="">
      </map>

1.  **可以通过shape=" "属性对热区形状进行设定**
2.  **coords=" "给出其坐标位置**  
    `顶点的坐标顺序为顺时针选取`  
    `X，Y坐标原点为图片左上角`  
    `坐标长度单位为px，坐标点具体看图片大小`

（圆形：圆心坐标位置，以及半径）需三个值  
eg：coords=“75,75,75”

（矩形：对角坐标）需四个值  
eg：coords=“10,160,150,280”

（多边形：所有顶点的坐标）需2n个值  
eg：正方形 coords=“25,20,112,20,112,50,25,50”  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTExMTI4NA_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTExMTI4NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/6f2e755d1970420f98265bca9112d93d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，193人围观）

还没有评论，来说两句吧...

相关阅读

相关前端图片热区的使用

最近学习了图片热区，相信大家对热区的定位还存在疑惑，下面我将简单介绍一下它的使用 1. 首先贴出它的代码 //热区 <img src="unite.jpg

男娘i/ 2022年12月08日 04:28/ 0 赞/ 194 阅读

相关 React 热区组件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

╰半夏微凉°/ 2022年09月03日 06:25/ 0 赞/ 199 阅读

相关热区背景!

其实是个挺简单的效果,可是却花了比较长的时间,于是就记录下来了遇到了一些问题问题很复杂抽空在写一下现在还存在一些问题比如在ff下看看吧哈哈

落日映苍穹つ/ 2022年08月05日 16:15/ 0 赞/ 130 阅读

相关 HTML 图片热区（img usemap）

<img> element ‘s attribute: usemap MDN [https://developer.mozilla.org/en-US/docs/Web/

淩亂°似流年/ 2022年07月12日 05:26/ 0 赞/ 162 阅读

相关 HTML 图片热区（img usemap）

<img> element ‘s attribute: usemap MDN [https://developer.mozilla.org/en-US/docs/Web/

小咪咪/ 2022年07月12日 05:26/ 0 赞/ 209 阅读

相关前端使用 distpicker 实现省市区的三级联动选择

不多说，直接上代码首先需要导入三个js 文件 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" typ

系统管理员/ 2022年05月19日 05:24/ 0 赞/ 578 阅读

相关前端关于图片与使用注意

前端关于图片与使用注意 Img属于html标签，background是css方法。一个页面由html、css、js组成，按照浏览器解析机制，html标签优先解析。

女爷i/ 2022年05月09日 00:06/ 0 赞/ 193 阅读

相关 HTML图片热区map area的用法

本文转自：[http://www.nowamagic.net/html/html\_MapArea.php][http_www.nowamagic.net_html_html_

浅浅的花香味﹌/ 2022年04月12日 07:17/ 0 赞/ 214 阅读

相关前端热更新初步了解

前端页面热更新了解过前端性能优化的同学应该清楚，给页面加载提速的终极方案就是CDN，这是BS架构本身的特点决定的，无论什么前端提速手段，最终都会回到客户端文件的传输上来；与

﹏ヽ暗。殇╰゛Y/ 2022年04月08日 16:54/ 0 赞/ 325 阅读

相关 HTML图像热区随图片缩放自动调整

　　思路很简单，就是设置coords对应的坐标按比例缩放就可以了。注意，给出的代码只是页面初始显示时调整一次，再发生变化没有进行调整。 <img src=

灰太狼/ 2022年04月08日 09:29/ 0 赞/ 243 阅读