Question

我有一个图像映射，它实现了着名的插件，使其动态调整大小到任何屏幕。现在我希望在用户将鼠标悬停时突出显示制作区域的某些内容（显然，如果他/她将鼠标移出，则会将其移除）。

我试图从这个人那里实现一个着名的插件：@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;
}

突出显示图像地图区

0 个答案: