图片地图 / 图片热点虽然功能强大，但是不能根据页面的窗口调整而自适应，图片地图成了摆设。
今天给大家分享一个方法，有了它，再也不用担心图片地图走错门了。
话不多说，直接上源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
.navImage img{
width:100%;
height:auto;
}
.navImage{
/* text-align:center; */
margin-left:-8px!important;
}
body{
margin:0!important;
}
</style>
<body>
<div class="navImage">
<img id="img" src="./02.jpg" alt="navbar" usemap="#navImg">
<map id="navImg" name="navImg">
<area shape="rectangle" coords="160,65,300,120" href="http://www.baidu.com" title="改性沥青生产" alt="改性沥青生产">
<area shape="rectangle" coords="300,140,420,190" href="#" title="沥青运输" alt="沥青运输">
<area shape="rectangle" coords="490,130,620,190" href="#" alt="试验室" title="试验室">
<area shape="rectangle" coords="610,200,780,260" href="#" alt="沥青混合料生产" title="沥青混合料生产">
<area shape="rectangle" coords="815,280,1000,340" href="#" alt="水稳混合料生产" title="水稳混合料生产">
<area shape="rectangle" coords="270,300,420,360" href="#" alt="混合料运输" title="混合料运输">
<area shape="rectangle" coords="320,380,440,450" href="#" alt="路面摊铺" title="路面摊铺">
<area shape="rectangle" coords="520,420,640,470" href="#" alt="路面压实" title="路面压实">
</map>
</div>
<script>
areaValue();
var timeout = null;//onresize触发次数过多，设置定时器
window.onresize = function () {
clearTimeout(timeout);
timeout = setTimeout(function () { window.location.reload(); }, 100);//页面大小变化，重新加载页面以刷新MAP
}
function areaValue(){
$("area").each(function(){
var oldValue=new String();
oldValue=$(this).attr("coords");
var newValue=adjustPoint(oldValue);
$(this).attr("coords",newValue);
})
}
function adjustPoint(item){
var pageWidth=$("body").css("width"); //页面的长宽
var pageHeight=$("body").css("height");
var imageWidth = 1022; //图片的长宽
var imageHeigth = 599;
var itemChild = item.split(",");
for(var i=0;i<itemChild.length;i++){
itemChild[i] = Math.round(parseInt(itemChild[i]) * parseInt(pageWidth) / parseInt(imageWidth)).toString();
i++;
itemChild[i] = Math.round(parseInt(itemChild[i]) * parseInt(pageHeight) / parseInt(imageHeigth)).toString();
}
//生成新的坐标点
var newValue= "";
for (var i = 0; i < itemChild.length; i++) {
newValue += itemChild[i];
if (i < itemChild.length - 1) {
newValue += ",";
}
}
return newValue;
}
</script>
</body>
直接复制运行即可看到效果，注意：
①这里我用到的是最新版的jquery CDN加速版，jquery版本不要过低
②window.onresize 事件，浏览器尺寸变化响应事件，这个我在后面文章http://570109268.iteye.com/admin/blogs/2406188中做了总结
③window.location.reload()，刷新页面，对此也在后面文章中针对多个js刷新页面做了对比总结
.
相关推荐
在JavaScript中，动态设置图片的热区（hotspots）并获取图片坐标是一项常见的需求，尤其在交互式网页设计中。热区技术允许我们为图片指定特定的交互区域，用户点击或悬停在这些区域上时可以触发特定的事件。本文将...
- 坐标的单位通常是像素，需要根据实际图像大小进行设定。 4. **交互性与动态效果**： - 要实现"点击变颜色"的效果，通常需要JavaScript的支持。通过监听`click`事件，可以获取点击的区域，并修改其样式，如改变`...
在HTML中，热区通常通过`<map>`和`<area>`标签来实现。`<map>`标签定义了一个图像映射，即关联一个图像和一组定义的热区。`<area>`标签则用于定义热区的具体形状、坐标和行为。以下是创建热区的基本步骤： 1. **...
"热区随网页大小等比放缩"这个知识点涉及到响应式设计和适应性布局，确保网页在不同设备上，无论是PC还是手机，都能提供一致的用户体验。以下是对这个主题的详细解释： 1. **热区（Hotspots）**：热区是网页元素的...
在Vue项目中实现图片上画矩形框并获取对角坐标以及设置`<map>`中的`<area>`样式，涉及到的技术主要包括JavaScript、HTML5的绘图API以及图像热区技术。接下来，我们将深入探讨这些知识点。 1. **JavaScript绘图API**...
- 考虑到不同设备和屏幕尺寸，热区的坐标和大小可能需要根据窗口大小变化进行调整。可以监听`resize`事件，重新计算和设置`<area>`的`coords`属性。 综上所述，这个项目涉及到JavaScript的DOM操作、事件处理、...
在网页设计中，图片热区（Image Map）是一种常见的交互元素，它允许用户通过点击或交互特定区域来触发不同的响应。jQuery 是一个流行的JavaScript库，它简化了DOM操作，事件处理，动画效果等功能，因此使用jQuery...
热区是一个坐标点，当鼠标在这个点上时，光标的行为会发生变化。在VC中，我们可以使用`CURSORINFO`结构来获取或设置光标的属性，包括热区。 接下来，我们来探讨如何在VC中创建自定义光标。首先，你需要准备两个文件...
`<map>` 标签定义一个图像映射，而 `<area>` 标签则定义了图像上的一个热区，包括形状（圆形、矩形或多边形）、坐标和关联的超链接或JavaScript函数。 ```html <map name="exampleMap"> ,0,50,50" onclick=...
图片热区是通过HTML的`<map>`和`<area>`标签实现的，它们共同定义了图片上的不同区域以及每个区域的形状、大小和链接。`<map>`标签定义了一个图像映射的名字，而`<area>`标签则用于定义具体热区的坐标和行为。例如：...
generator网上找的image map生成热区工具，放到本地方便访问出处：使用方法将本项目克隆到本地,浏览器打开index.html或者直接访问在输入框输入图片地址或者拖拽本地图片到输入框等待图片加载后,鼠标移入图片区域会...
对于移动和缩放，可以通过修改Canvas的绘图命令来动态调整热区的坐标和大小。对于边界反弹，可以在每次移动或缩放后检查热区的位置，如果超出边界则进行相应的调整。 此外，工具方面，有一些图形编辑软件如Photo...
在IT行业中，前端开发是一项关键任务，涉及到用户与应用程序之间的交互设计。...在实践中，开发者还可以根据具体需求调整和扩展这个DEMO，实现更多功能，比如支持多语言文本、自适应布局和动态热区更新等。
在网页设计中，图片热区（Image Map）是一种常见的交互元素，它允许用户与图片的特定区域进行交互，比如点击跳转到不同的链接或者执行其他操作。本示例主要探讨如何使用CSS来自定义图片热区，使得这些交互区域不仅...
用户可以通过精确的坐标系统来设置每个热区的具体位置和大小。 3. **热点链接与事件**：在每个热区上可以绑定不同的链接或触发事件，例如跳转到其他网页、弹出信息框或执行JavaScript代码，实现地图的交互性。 4. ...
2. **页面模型**：插件支持创建复杂的页面模型，允许用户通过拖放和调整大小来精确地定位和设置热区，这有助于创建出直观且互动性强的网页元素。 3. **自定义链接**：每个热区可以绑定到不同的URL，点击这些热区时...
### 图像的影像地图超链接（热点区域），map标签浅谈 #### 一、概述 在Web开发领域，HTML提供了一种独特的功能——通过使用`<map>`标签及其相关属性来实现图像上的热点区域（Hotspots）链接。这种方式不仅能够增强...
7. **坐标系统**：为了指定热区的位置和大小，我们需要一个坐标系统。可以使用绝对像素值，或者相对于图片的百分比来定义热区的边界。 8. **跨浏览器兼容性**：jQuery的一大优势是其良好的浏览器兼容性。然而，在...
热区检测通常涉及到坐标转换，即把鼠标坐标与屏幕上的预设区域进行比较。 5. **事件处理**：在MFC中，我们可以通过重载消息映射函数来处理捕获到的鼠标事件。例如，当`WM_MOUSEMOVE`消息被发送时，我们可以检查当前...
这个功能实现了对不同屏幕尺寸的自适应，因为坐标计算是基于元素的相对位置，而不是固定的像素值。因此，无论屏幕大小如何变化，信息div总能正确显示。 通过以上步骤，我们已经成功创建了一个简单的鼠标悬停提示...