Highlighting image map areas

Question

I've got an image map, which implements the famous plugin for make it dynamically resize to any screen. Now I wished to implement something for make areas highlight when the user mouses over (and obviously, the light gets removed if he/she mouses out).

I tried to implement a part famous plugin from this guy: @enhzflep, but it seems it's not working. (I say a part because he tells how to apply hover on a rect and on a poly shape, but I only do need poly).

Check this post for his plugin: how to apply hover on an image map area.

Source of the image: Source

This is the 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>

And this is the 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;
}

EDIT: I modified the code as this, but it is still not working:

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;
}

I don't see where you call drawPoly function. I'm guessing you need to call it from myHover and add an event listener for mouse enter to your element and call myHover function — PersyJack, Mar 08 '17 at 14:18
Oh thank you! I added the call and the event listener, but it seems it's not working — KamiV, Mar 08 '17 at 14:23
So do you still have a question? I put your code on jsfiddle, it's working fine. Open the developer tool on chrome, you'll see your hover and leave functions are firing. https://jsfiddle.net/yc1k66cL/1/ — PersyJack, Mar 09 '17 at 14:44
If you can provide an link image it would be easily to determine your code (don't have to be your image but something similar to what your trying to do). — thekodester, Mar 10 '17 at 14:12
Adding your most recent update to a fiddle works fine. Maybe you just need to update the line color. https://jsfiddle.net/7qu7tdxu/ — thekodester, Mar 10 '17 at 17:03
Kodecount, thanks for your reply. Just one more question: the highlighted border doesn't dynamically resizes or moves as the image map itself. How can I make this happen? — KamiV, Mar 21 '17 at 18:49

Highlighting image map areas

0 Answers0