我有一个图像映射,它实现了着名的插件,使其动态调整大小到任何屏幕。现在我希望在用户将鼠标悬停时突出显示制作区域的某些内容(显然,如果他/她将鼠标移出,则会将其移除)。
我试图从这个人那里实现一个着名的插件:@enhzflep,但它似乎无法正常工作。 (我说一个部分是因为他讲述了如何在矩形和多边形上应用悬停,但我只需要多边形)。
在此帖子中查看他的插件:how to apply hover on an image map area。
图片来源:Source
这是HTML / JavaScript
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="homestyle.css" type="text/css">
<script type="text/javascript" language="javascript">
//THE PART I NEED OF THE @enhzflep PLUGIN.
var hdc;
// shorthand func
function byId(e){return document.getElementById(e);}
// takes a string that contains coords eg - "227,307,261,309, 339,354, 328,371, 240,331"
// draws a line from each co-ord pair to the next - assumes starting point needs to be repeated as ending point.
function drawPoly(coordStr)
{
var mCoords = coordStr.split(',');
var i, n;
n = mCoords.length;
hdc.beginPath();
hdc.moveTo(mCoords[0], mCoords[1]);
for (i=2; i<n; i+=2)
{
hdc.lineTo(mCoords[i], mCoords[i+1]);
}
hdc.lineTo(mCoords[0], mCoords[1]);
hdc.stroke();
}
function myHover(element)
{
var hoveredElement = element;
var coordStr = element.getAttribute('coords');
}
function myLeave()
{
var canvas = byId('myCanvas');
hdc.clearRect(0, 0, canvas.width, canvas.height);
}
function myInit()
{
// get the target image
var img = byId('backImage');
var x,y, w,h;
// get it's position and width+height
x = img.offsetLeft;
y = img.offsetTop;
w = img.clientWidth;
h = img.clientHeight;
// move the canvas, so it's contained by the same parent as the image
var imgParent = img.parentNode;
var can = byId('myCanvas');
imgParent.appendChild(can);
// place the canvas in front of the image
can.style.zIndex = 1;
// position it over the image
can.style.left = x+'px';
can.style.top = y+'px';
// make same size as the image
can.setAttribute('width', w+'px');
can.setAttribute('height', h+'px');
// get it's context
hdc = can.getContext('2d');
// set the 'default' values for the colour/width of fill/stroke operations
hdc.fillStyle = 'red';
hdc.strokeStyle = 'red';
hdc.lineWidth = 2;
}
</script>
</head>
<body onload="myInit();" bgcolor="#000000">
<canvas id="myCanvas">Your browser doesn't support canvas.</canvas>
<div class="container">
<img src="myBack.jpg" id="backImage" alt="myBack" width="100%" usemap="#textmap">
<div class="toptext">Top text</div>
//IMAGE MAP
<map name="textmap" id="backMap">
<area shape="poly" coords="606,783, 610,768, 621,634, 617,617, 625,566, 632,484, 625,461, 635,453, 635,437, 648,425, 650,391, 694,388, 699,403, 716,422, 708,426, 718,440, 734,444, 763,553, 750,564, 746,628, 764,705, 829,774, 825,784, 606,783" href="1.htm" target="_blank">
<area shape="poly" coords="752,637, 756,626, 756,581, 774,529, 780,469, 803,456, 806,448, 806,437, 786,442, 744,426, 772,405, 795,395, 800,396, 805,360, 809,338, 826,336, 833,350, 852,349, 855,361, 850,362, 845,357, 824,362, 826,372, 842,360, 827,376, 844,367, 829,380, 837,377, 829,384, 837,386, 846,380, 873,385, 864,414, 834,429, 831,440, 837,446, 864,461, 877,509, 860,528, 857,544, 832,561, 828,548, 813,546, 809,549, 814,573, 814,580, 830,592, 853,598, 853,585, 867,575, 870,589, 879,596, 879,614, 881,625, 870,676, 863,707, 864,726, 877,734, 892,747, 900,750, 902,759, 883,769, 880,783, 833,779, 832,768, 785,723, 763,685, 752,637" href="1.htm" target="_blank">
</map>
</div>
//FAMOUS PLUGIN FOR MAP RESIZING
<script type="text/javascript" language="javascript">
window.onload = function () {
var ImageMap = function (map) {
var n,
areas = map.getElementsByTagName('area'),
len = areas.length,
coords = [],
previousWidth = 1600;
for (n = 0; n < len; n++) {
coords[n] = areas[n].coords.split(',');
}
this.resize = function () {
var n, m, clen,
x = document.body.clientWidth / previousWidth;
for (n = 0; n < len; n++) {
clen = coords[n].length;
for (m = 0; m < clen; m++) {
coords[n][m] *= x;
}
areas[n].coords = coords[n].join(',');
}
previousWidth = document.body.clientWidth;
return true;
};
window.onresize = this.resize;
},
imageMap = new ImageMap(document.getElementById('backMap'));
imageMap.resize();
}
</script>
//DYNAMICALLY RESIZE BACKIMAGE
<script type="text/javascript">
document.getElementById("backImage").style.width=window.innerWidth;
document.getElementById("backImage").style.height=window.innerHeight;
</script>
</body>
</html>
这就是CSS:
.container {
position: relative;
}
.toptext {
position: absolute;
left: 0;
top: 30px;
text-align: center;
width: 100%;
font-size: 18px;
}
#myCanvas {
pointer-events: none;
position: absolute;
}
编辑: 我修改了代码,但它仍然无效:
HTML / JavaScript的
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="homestyle.css" type="text/css">
<script>
var hdc;
function byId(e){return document.getElementById(e);}
function drawPoly(coordStr)
{
var mCoords = coordStr.split(',');
var i, n;
n = mCoords.length;
hdc.beginPath();
hdc.moveTo(mCoords[0], mCoords[1]);
for (i=2; i<n; i+=2)
{
hdc.lineTo(mCoords[i], mCoords[i+1]);
}
hdc.lineTo(mCoords[0], mCoords[1]);
hdc.stroke();
}
function myLeave()
{
var canvas = byId('myCanvas');
hdc.clearRect(0, 0, canvas.width, canvas.height);
}
function myHover(element)
{
var hoveredElement = element;
var coordStr = element.getAttribute('coords');
drawPoly(coordStr);
}
function myInit()
{
var img = byId('backImage');
var x,y, w,h;
x = img.offsetLeft;
y = img.offsetTop;
w = img.clientWidth;
h = img.clientHeight;
var imgParent = img.parentNode;
var can = byId('myCanvas');
imgParent.appendChild(can);
can.style.zIndex = 1;
can.style.left = x+'px';
can.style.top = y+'px';
can.setAttribute('width', w+'px');
can.setAttribute('height', h+'px');
hdc = can.getContext('2d');
hdc.fillStyle = 'red';
hdc.strokeStyle = 'red';
hdc.lineWidth = 2;
}
</script>
</head>
<body onload="myInit();" bgcolor="#000000">
<canvas id="myCanvas">Il tuo browser non supporta i canvas. Ci dispiace!</canvas>
<img src="sfondoprof.jpg" id="backImage" alt="sfondoprof" width="100%" usemap="#textmap">
<map name="textmap" id="backMap">
<area shape="poly" onmouseover="myHover(this);" onmouseout="myLeave();" coords="606,783, 610,768, 621,634, 617,617, 625,566, 632,484, 625,461, 635,453, 635,437, 648,425, 650,391, 694,388, 699,403, 716,422, 708,426, 718,440, 734,444, 763,553, 750,564, 746,628, 764,705, 829,774, 825,784, 606,783" href="1.htm" target="_blank">
<area shape="poly" onmouseover="myHover(this);" onmouseout="myLeave();" coords="752,637, 756,626, 756,581, 774,529, 780,469, 803,456, 806,448, 806,437, 786,442, 744,426, 772,405, 795,395, 800,396, 805,360, 809,338, 826,336, 833,350, 852,349, 855,361, 850,362, 845,357, 824,362, 826,372, 842,360, 827,376, 844,367, 829,380, 837,377, 829,384, 837,386, 846,380, 873,385, 864,414, 834,429, 831,440, 837,446, 864,461, 877,509, 860,528, 857,544, 832,561, 828,548, 813,546, 809,549, 814,573, 814,580, 830,592, 853,598, 853,585, 867,575, 870,589, 879,596, 879,614, 881,625, 870,676, 863,707, 864,726, 877,734, 892,747, 900,750, 902,759, 883,769, 880,783, 833,779, 832,768, 785,723, 763,685, 752,637" href="1.htm" target="_blank">
</map>
<script type="text/javascript" language="javascript">
window.onload = function () {
var ImageMap = function (map) {
var n,
areas = map.getElementsByTagName('area'),
len = areas.length,
coords = [],
previousWidth = 1600;
for (n = 0; n < len; n++) {
coords[n] = areas[n].coords.split(',');
}
this.resize = function () {
var n, m, clen,
x = document.body.clientWidth / previousWidth;
for (n = 0; n < len; n++) {
clen = coords[n].length;
for (m = 0; m < clen; m++) {
coords[n][m] *= x;
}
areas[n].coords = coords[n].join(',');
}
previousWidth = document.body.clientWidth;
return true;
};
window.onresize = this.resize;
},
imageMap = new ImageMap(document.getElementById('backMap'));
imageMap.resize();
}
</script>
<script type="text/javascript">
document.getElementById("backImage").style.width=window.innerWidth;
document.getElementById("backImage").style.height=window.innerHeight;
</script>
</body>
</html>
CSS:
.container {
position: relative;
}
.toptext {
position: absolute;
left: 0;
top: 30px;
text-align: center;
width: 100%;
font-size: 18px;
}
#myCanvas {
pointer-events: none;
position: absolute;
}