html图片热区（可自适应屏幕）

最新推荐文章于 2024-06-30 16:22:52 发布
最新推荐文章于 2024-06-30 16:22:52 发布
阅读量2.1w 收藏 22
点赞数 5
分类专栏： html 文章标签： 前端  图片热区 自适应 热点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37628661/article/details/80048573
版权

要做个五一活动，商城部门就给了个jpg，懒得切图就弄的这个图片热点。直接热区加链接。

做完了想起来了，还要跟app webview交互，白写了。

还是分享出来。

<body>

<!--看好map的id，img的width，在编辑器里画热区的时候是图片自己的宽度，画好之后改成100%-->

<img src="images/top.jpg" width="100%" border="0" usemap="#Map">
<map name="Map" id = "CribMap"><area shape="rect" coords="46,633,598,845" href="/static/forAPP/sell/superBuy/super_detail.html?id=6c8c917148344769afc53d676527fb">
<area shape="rect" coords="42,881,594,1069" href="/static/forAPP/sell/superBuy/super_detail.html?id=a35dda9ab4f14d3386eb698752c94e">
<area shape="rect" coords="50,1093,586,1293" href="/static/forAPP/sell/superBuy/super_detail.html?id=89258ebfd0784e3db19355c6ae4ebc">
<area shape="rect" coords="66,2045,310,2389" href="/static/forAPP/sell/superBuy/super_detail.html?id=c9ed50656cca487c9e20b25480cc5d">
<area shape="rect" coords="342,2049,586,2393" href="/static/forAPP/sell/superBuy/super_detail.html?id=e24148da3b1a44f083169df9b77073">
<area shape="rect" coords="62,2409,302,2745" href="/static/forAPP/sell/superBuy/super_detail.html?id=4b3836a585864915a56e66742a258d">
<area shape="rect" coords="338,2413,590,2753" href="/static/forAPP/sell/superBuy/super_detail.html?id=6bf516b8e574471dbb35a155a8cbc1">
<area shape="rect" coords="26,2921,590,3141" href="/static/forAPP/sell/superBuy/super_detail.html?id=51360901b5fe411aa1e4002e07917b">
<area shape="rect" coords="26,3177,598,3409" href="/static/forAPP/sell/superBuy/super_detail.html?id=b21f6ba7b319425e82fd44261929d2">
<area shape="rect" coords="26,3457,586,3677" href="/static/forAPP/sell/superBuy/super_detail.html?id=11fefbdbb2fd4f5ba347e1fead9a46">
<area shape="rect" coords="26,3709,582,3945" href="/static/forAPP/sell/superBuy/super_detail.html?id=a16404ace3d943a0b2bfd8197f600c">
<area shape="rect" coords="22,3981,586,4197" href="/static/forAPP/sell/superBuy/super_detail.html?id=2ebe02496d154508971a467326e4aa">
<area shape="rect" coords="18,4229,582,4465" href="/static/forAPP/sell/superBuy/super_detail.html?id=5a586a7f55f64edc9da72c60a5cde1">
<area shape="rect" coords="58,4681,586,5265" href="/static/forAPP/sell/superBuy/super_detail.html?id=10d63ecacdbe49ba9ca02ff1695f82">
<area shape="rect" coords="50,5341,294,5665" href="/static/forAPP/sell/superBuy/super_detail.html?id=22d40f071e2f46979039d20d8f5f66">
<area shape="rect" coords="322,5341,578,5669" href="/static/forAPP/sell/superBuy/super_detail.html?id=5fb8455810594f6493348e07b5db7e">
<area shape="rect" coords="46,5693,286,6021" href="/static/forAPP/sell/superBuy/super_detail.html?id=c057c5b900064f7ea2f8f31a90e2b6">
<area shape="rect" coords="318,5693,578,6009" href="/static/forAPP/sell/superBuy/super_detail.html?id=1e657dd4c50647b092279e3264616a">
<area shape="rect" coords="30,6093,594,6385" href="/static/wechat/src/index/shop/shop_index/shop_index.html">
<area shape="rect" coords="314,6229,322,6297" href="/static/forAPP/sell/superBuy/super_detail.html?id=22d40f071e2f46979039d20d8f5f66">
</map>
<script>
  adjust();  
  
        var timeout = null;//onresize触发次数过多，设置定时器  
        window.onresize = function () {  
            clearTimeout(timeout);  
            timeout = setTimeout(function () { window.location.reload(); }, 100);//页面大小变化，重新加载页面以刷新MAP  
        }  
  
        //获取MAP中元素属性  
        function adjust() {  
            var map = document.getElementById("CribMap");  
            var element = map.childNodes;  

            var itemNumber = element.length / 2;  


            for (var i = 0; i < itemNumber - 1; i++) {  

//element 是奇数时，item 是2*i+1，偶数时是2*i

                var item = 2 * i ;  
                var oldCoords = element[item].coords;  
                var newcoords = adjustPosition(oldCoords);  
                element[item].setAttribute("coords", newcoords);  
            }  
            var test = element;  
        }  
  
        //调整MAP中坐标  
        function adjustPosition(position) {  
            var pageWidth = document.body.clientWidth;//获取页面宽度  
            var pageHeith = document.body.clientHeight;//获取页面高度  
  
            var imageWidth = 640;//图片的真实长宽  
            var imageHeigth = 6438;  
  
            var each = position.split(",");  
            //获取每个坐标点  
            for (var i = 0; i < each.length; i++) {  
                each[i] = Math.round(parseInt(each[i]) * pageWidth / imageWidth).toString();//x坐标  
                i++;  
                each[i] = Math.round(parseInt(each[i]) * pageHeith / imageHeigth).toString();//y坐标  
            }  
            //生成新的坐标点  
            var newPosition = "";  
            for (var i = 0; i < each.length; i++) {  
                newPosition += each[i];  
                if (i < each.length - 1) {  
                    newPosition += ",";  
                }  
            }  
            return newPosition;  
        }  
        
        
</script>
</body>



夏天咯
关注
  • 5
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
html img热区坐标根据屏幕大小自适应
wt20100的专栏
06-18 5404
//根据分辨率自适应热区坐标         function changeCoords(){             var width = document.body.offsetWidth;             var height = document.body.offsetHeith;             if (1920 == width) return;      
HTML在图片中设置热区
weixin_54799350的博客
08-10 1058
当点击派大星 章鱼哥 海绵宝宝的家门时，跳转到一个新的页面，先将所需要用到的坐标点及尺寸都标记好。对于多边形只需要把所有的顶点的坐标都列出来，注意第一个点和最后一个点必须相同。首先选择一张图片，usemap的值为#加上map的id 或 name 属性。x1,y1为长方形左上角的坐标，x2,y2为右下角的坐标。x1,y1为圆心的坐标点 r为圆形区域半径。下面以一个简单的小案例来介绍如何设置热区。：将shape设置为default即可。热区可以设置四种形状。
HTML map标签与area标签 图片热区 使用说明
coderwwh的博客
08-10 2943
有时提供了一张图,需要在图片具体位置做点击操作,这时候用热区图是最好的选择,是与img标签绑定使用的，常被用来赋予给客户端图像某处区域特殊的含义，点击该区域可跳转到新的文档。
js实现图片宽为屏幕宽，高度自适应
m0_72684019的博客
06-30 234
【代码】js实现图片宽为屏幕宽，高度自适应。
图片热区自适应和设置热区边框
weixin_51562049的博客
03-22 792
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style data-merge-styles="true"></style> <title> 图片热区自适应 和热区边框 </title> <m..
Html Map元素 Area热区实时窗口自适应
xiaoxl084520的博客
06-05 457
项目中遇到小问题，图片渲染的大小不确定，则对应map区域容易产生偏移，通过查找资料，根据需求实现了区域的自适应大小，不用每次变动都重新刷新页面，下面展示。
html的热区可以自动缩放,科技常识：html中map area 热区自适应的原生js实现方案...
weixin_42318912的博客
05-31 534
今天小编跟大家讲解下有关html中map area 热区自适应的原生js实现方案 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html中map area 热区自适应的原生js实现方案 的相关资料，希望小伙伴们看了有所帮助。在做自适应网页的时候 如果在图片中使用了热区map。图片可以通过样式实现：图片大小随页面变化 但是MAP中每个area的坐标并不能通过css直接实现自适应。这篇文章...
HTML坐标不随着屏幕大小改变,HTML热区map坐标，随窗口大小自适应办法（javascript）...
weixin_36402316的博客
06-03 508
为图片添加MAP：/>/>/>/>图片大小随页面变化，需要MAP中每个area的坐标也随页面等比例变化。Javascript实现：adjust();var timeout = null;//onresize触发次数过多，设置定时器window.onresize = function () {clearTimeout(timeout);timeout = setTimeout...
HTML热区map坐标，随窗口大小自适应办法（javascript）
新技术革命
03-13 2372
为图片添加MAP： &lt;div&gt; &lt;span id="lbresult"&gt; &lt;img src='YardCribGraphic.aspx' width='100%' heigh='100%' usemap='#b0a1a239cbf34d64acf4d6798dd67da0' border='0'/&gt; &lt;map id="CribMap" name="b0a1...
html MAp coords 自适应热点图片宽度定位
03-28 1798
业余结了一个小单子，html的作业，但是需要用DW做热点图，电脑也没有那玩意，就用淘宝热点图做了。后来发现图片比我屏幕还宽，body出现了滚动轴，如果改成百分比，热点图就错位了。于是就用js控制了。 图片加载前获取图片的原始宽度，这个时候，算出视窗宽度与图片宽度的比例Cp。 用dom查询area节点，获取coord属性。 每个属性乘上CP比例。 再setAttribute就好了。 ...
qt练习控件label控件-lineEdit控件样例代码
07-30
qt练习控件label控件-lineEdit控件样例代码
【JCR一区级】麻雀搜索算法SSA-CNN-LSTM-Attention故障诊断分类预测【含源码 5689期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Attention分类系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Attention分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Attention分类 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Attention分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Attention分类 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Attention分类
详解MATLAB Simulink通信系统建模与仿真
07-30
第1 章 MATLAB 基础与通信系统仿真 1.1 MATLAB 简介 1.2 MATLAB 程序设计 1.3 通信系统仿真 第2 章 Simulink 仿真基础 2.1 Simulink 简介 2.2 Simulink 工作环境 2.3 Simulink 仿真的基本方法 2.4 创建自己的模块库 2.5 S-函数的编写 第3 章 通信信号与系统分析 3.1 离散信号和系统 3.2 Fourier 分析 3.3 带通信号的低通等效 3.4 随机信号分析 第4 章 信道 4.1 加性高斯白噪声信道 4.2 多径衰落信道 第5 章 模拟调制 5.1 幅度调制 5.2 角度调制 第6 章 数字基带传输 6.1 概述 6.2 二进制基带信号传输 6.3 基带PAM 信号传输 6.4 带限信道的信号传输 第7 章 数字信号载波传输 7.1 概述 7.2 载波幅度调制（PAM） 7.3 载波相位调制（PSK） 7.4 正交幅度调制（QAM） 7.5 载波频率调制（FSK） 第8 章 信道编码和交织 8.1 概述 8.2 线性分组码
SCI一区】淘金算法GRO-CNN-BiLSTM-Mutilhead-Attention多变量时序预测含源码 5642.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-BiLSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-BiLSTM-Mutilhead-Attention回归预测
2020年首届“洪泽湖杯”中国人工智能掼蛋算法大赛第8名我就是掼蛋.zip
07-30
毕业设计是高等教育阶段学生完成学业的一个重要环节，通常在学士或硕士学业即将结束时进行。这是学生将在整个学业中所学知识和技能应用到实际问题上的机会，旨在检验学生是否能够独立思考、解决问题，并展示其专业能力的一项综合性任务。 毕业设计的主要特点包括： 独立性： 毕业设计要求学生具备独立思考和解决问题的能力。学生需要选择一个合适的课题，研究相关文献，进行实地调查或实验，并提出独立见解。 实践性： 毕业设计是将理论知识应用到实际问题中的一次实践。通过完成毕业设计，学生能够将所学的专业知识转化为实际的解决方案，加深对专业领域的理解。 综合性： 毕业设计往往要求学生运用多个学科的知识，综合各种技能。这有助于培养学生的综合素养，提高他们的综合能力。 导师指导： 学生在毕业设计过程中通常由一名指导老师或导师团队提供指导和支持。导师负责引导学生确定研究方向、制定计划、提供建议，并在整个过程中监督进展。 学术规范： 毕业设计要求学生按照学术规范完成研究，包括文献综述、研究设计、数据采集与分析、结论和讨论等环节。学生需要撰写一篇完整的毕业论文，并进行答辩。
网络音乐搜索引擎，音乐搜索器 - 多站合一音乐搜索,音乐在线试听
最新发布
07-30
网络音乐搜索引擎，音乐搜索器 - 多站合一音乐搜索,音乐在线试听 效果截图https://www.diyiyuanma.cn/3444.html 多站合一音乐搜索解决方案，数据调用的是各网站的API接口， 有的接口并不是开放的，随时可能失效，本项目相关代码仅供参考。 网络音乐搜索引擎，音乐搜索器 - 多站合一音乐搜索,音乐在线试听
这是一个旨在简化合约部署、验证、交互等操作用于生成区块链智能合约Foundry框架指令的 Web3.0开发者工具
07-30
这是一个旨在简化合约部署、验证、交互等操作用于生成区块链智能合约Foundry框架指令的 Web3.0开发者工具。
三种esprit算法实现doa估计 _rezip.zip
07-30
在信号处理领域，DOA（Direction of Arrival）估计是一项关键技术，主要用于确定多个信号源到达接收阵列的方向。本文将详细探讨三种ESPRIT（Estimation of Signal Parameters via Rotational Invariance Techniques）算法在DOA估计中的实现，以及它们在MATLAB环境中的具体应用。 ESPRIT算法是由Paul Kailath等人于1986年提出的，其核心思想是利用阵列数据的旋转不变性来估计信号源的角度。这种算法相比传统的 MUSIC（Multiple Signal Classification）算法具有较低的计算复杂度，且无需进行特征值分解，因此在实际应用中颇具优势。 1. 普通ESPRIT算法 普通ESPRIT算法分为两个主要步骤：构造等效旋转不变系统和估计角度。通过空间平移（如延时）构建两个子阵列，使得它们之间的关系具有旋转不变性。然后，通过对子阵列数据进行最小二乘拟合，可以得到信号源的角频率估计，进一步转换为DOA估计。 2. 常规ESPRIT算法实现 在描述中提到的`common_esprit_method1.m`和`common_esprit_method2.m`是两种不同的普通ESPRIT算法实现。它们可能在实现细节上略有差异，比如选择子阵列的方式、参数估计的策略等。MATLAB代码通常会包含预处理步骤（如数据归一化）、子阵列构造、旋转不变性矩阵的建立、最小二乘估计等部分。通过运行这两个文件，可以比较它们在估计精度和计算效率上的异同。 3. TLS_ESPRIT算法 TLS（Total Least Squares）ESPRIT是对普通ESPRIT的优化，它考虑了数据噪声的影响，提高了估计的稳健性。在TLS_ESPRIT算法中，不假设数据噪声是高斯白噪声，而是采用总最小二乘准则来拟合数据。这使得算法在噪声环境下表现更优。`TLS_esprit.m`文件应该包含了TLS_ESPRIT算法的完整实现，包括TLS估计的步骤和旋转不变性矩阵的改进处理。 在实际应用中，选择合适的ESPRIT变体取决于系统条件，例如噪声水平、信号质量以及计算资源。通过MATLAB实现，研究者和工程师可以方便地比较不同算法的效果，并根据需要进行调整和优化。同时，这些代码也为教学和学习DOA估计提供了一个直观的平台，有助于深入理解ESPRIT算法的工作原理。
js动态改变图片热区坐标，图片热区自适应
06-08
要实现图片热区自适应，可以使用百分比单位来定义热区的坐标，这样随着图片大小的变化，热区的位置也会自动调整。同时，如果要动态改变图片热区的坐标，可以通过JavaScript来实现。 下面是一个使用纯JavaScript实现...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值