<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
ul{
list-style: none;
}
#box{
background: url('timg.jpg') no-repeat 0% 0% transparent;
width: 1024px;
height: 768px;
position: relative;
}
#diagonal{
position:absolute;
top:0px;
left:0;
opacity: 1;
}
#img{
position:absolute;
top:0px;
left:0;
opacity: 0;
}
.hot_div {
border: 1px dashed blue;
background: #5a72f8;
position: absolute;
width: 0;
height: 0;
opacity: 0.1;
z-index: 9;
}
#map-list{
position: absolute;
top:0;
z-index: 100;
background: #f04747aa;
cursor: pointer;
line-height: 40px;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div id="box">
<canvas id="diagonal" width="1024px" height="768px"></canvas>
<img id="img" src="timg.jpg" width="1024px" height="768px;" usemap="#Map">
<map id="Map" name="Map"></map>
<ul id="map-list"></ul>
</div>
</body>
<!--选取热区-->
<script type="text/javascript">
var Oimg = document.getElementById("img")
var pointList = [];
let status = false;
window.onload = function() {
Oimg.onmousedown = function(e) {
if (status) {
return;
}
var posx = e.clientX;
var posy = e.clientY;
let existence = pointList.filter(item=>{
if (posx>item.x1 && posx< item.x2 && posy>item.y1 && posy< item.y2) {
return item;
}
})
if (existence && existence.length) {
console.log('这个区域已经有热区了');
return;
}
var div = document.createElement("div");
div.className = "hot_div";
div.id = "hot_div" + pointList.length;
div.style.left = e.clientX + "px";
div.style.top = e.clientY + "px";
document.body.appendChild(div);
document.onmousemove = function(ev) {
div.style.left = Math.min(ev.clientX, posx) + "px";
div.style.top = Math.min(ev.clientY, posy) + "px";
// Math.abs是取绝对值
div.style.width = Math.abs(posx - ev.clientX) + "px";
div.style.height = Math.abs(posy - ev.clientY) + "px";
document.onmouseup = function() {
div.parentNode.removeChild(div);
var point = {
x1: parseInt(div.style.left),
y1: parseInt(div.style.top),
x2: parseInt(div.style.left) + parseInt(div.style.width),
y2: parseInt(div.style.top) + parseInt(div.style.height),
host: 'http://www.ahhc.cc'
}
pointList.push(point);
createMap();
document.onmousemove = null;
document.onmouseup = null;
}
}
}
}
$(document).on('click', '.delPoint', function(e){
status = true;
document.onmousemove = null;
document.onmouseup = null;
var index = $(this).data('index');
pointList.splice(index, 1);
createMap();
setTimeout(function(){
status = false;
}, 1000)
return false;
})
$(document).on('click', '.pointli', function(e){
status = true;
document.onmousemove = null;
document.onmouseup = null;
var index = $(this).data('index');
let point = pointList[index];
var host = prompt("请输入新的链接", point.host);
if (host) {
point.host = host;
pointList.splice(index, 1, point);
createMap();
}
e.stopPropagation();
e.preventDefault();
setTimeout(function(){
status = false;
}, 1000)
})
// 创建map热区和坐标li
function createMap(){
var li = '';
var areaTpl = '';
var canvers = document.getElementById("diagonal");
var context = canvers.getContext("2d");
context.globalAlpha = 0.5;
pointList.forEach((item, index)=> {
li += '<li class="pointli" data-index="'+index+'">'+(item.host)+'<button class="delPoint" data-index="'+index+'">删除</button></li>';
areaTpl += '<area '+
'shape="poly" '+
'coords="'+item.x1+','+item.y1+','+item.x2+','+item.y1+','+item.x2+','+item.y2+','+item.x1+','+item.y2+'" '+
'href ="'+(item.host)+'" '+
'target ="_blank" '+
'alt="Venus" />';
})
$('#map-list').html(li);
$('#Map').html(areaTpl);
$("#Map area").each(function () {
$(this).mouseover(function () {
context.beginPath();
var strs = new Array(); //定义一数组
strs = $(this).attr("coords").split(",");
var i1, i2;
for (var i = 0; i < strs.length; i++) {
if (i % 2 == 0) {
i1 = strs[i];
}
if (i % 2 == 1) {
i2 = strs[i];
if (i == 1) {
context.moveTo(i1, i2);
}
else {
context.lineTo(i1, i2);
}
}
}
context.fillStyle = "#C0C0C0";
context.fill();
context.closePath(); //闭合
});
$(this).mouseout(function () {
context.clearRect(0, 0, 1024, 768);
});
});
}
</script>
</html>
js 动态获取图片矩形热区，并在热区上添加蒙版，鼠标经过，以半透明形式显示该区域
4星 · 超过85%的资源 需积分: 49 182 浏览量
2019-01-14
10:45:54
上传
评论
收藏 2.17MB RAR 举报 
area.rar （38个子文件） 
area 
index.html 7KB
jquery.min.js 94KB fonts 
iconfont.svg 185KB materialdesignicons-webfont.eot 231KB fontawesome-webfont.svg 382KB glyphicons-halflings-regular.ttf 44KB typicons.woff 58KB ionicons.eot 100KB iconfont.woff 24KB fontawesome-webfont.woff2 70KB materialdesignicons-webfont.woff 114KB typicons.svg 182KB fontawesome-webfont.eot 75KB typicons.less 22KB FontAwesome.otf 122KB ionicons.svg 280KB materialdesignicons-webfont.ttf 230KB fontawesome-webfont.woff 88KB glyphicons-halflings-regular.woff2 18KB themify.woff 55KB typicons.ttf 98KB typicons.eot 98KB ionicons.woff 56KB themify.eot 77KB glyphicons-halflings-regular.eot 20KB ionicons.ttf 161KB materialdesignicons-webfont.woff2 88KB themify.ttf 77KB iconfont.eot 37KB glyphicons-halflings-regular.svg 106KB themify.svg 229KB iconfont.ttf 37KB glyphicons-halflings-regular.woff 23KB materialdesignicons-webfont.svg 1.71MB fontawesome-webfont.ttf 149KB
timg.jpg 148KB css icons.css 197KB iconfont.css 37KB资源评论
szlalala2019-03-03测试一下！！！！
