Highlight Image Map Area Hotspots With jQuery

@Mark, can you post a url so I can take a look at the code for you? Thanks, Sam

will you tell me how to highlight the map area

// stores the device context of the canvas we use to draw the outlines
// initialized in myInit, used in myHover and myLeave
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 drawRect(coOrdStr)
{
var mCoords = coOrdStr.split(',');
var top, left, bot, right;
left = mCoords[0];
top = mCoords[1];
right = mCoords[2];
bot = mCoords[3];
hdc.strokeRect(left,top,right-left,bot-top);
}

function myHover(element)
{
var hoveredElement = element;
var coordStr = element.getAttribute('coords');
var areaType = element.getAttribute('shape');

switch (areaType)
{
case 'polygon':
case 'poly':
drawPoly(coordStr);
break;

case 'rect':
drawRect(coordStr);
}
}

function myLeave()
{
var canvas = byId('myCanvas');
hdc.clearRect(0, 0, canvas.width, canvas.height);
}

function myInit()
{
// get the target image
var img = byId('img-imgmap201293016112');

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 = '#F76D2B';
hdc.strokeStyle = '#F76D2B';
hdc.lineWidth = 2;

}

Hi Mark, yes it’s the disqus comment moderating when you post a link, I’ll have a look at your stuff and get back to you when I get the chance. Which files on
OUTPUT_poster.zip should I be looking at?

Sam

The best bet is to ensure that all images are loaded before trying to call maphilight. The window.load hook allows whereby document.load does not.

$(window).load(function() {
//This must be called before hiding HTML elements. Hidden HTML

//elements do not respond properly to JQuery script
init_images();

//Initialize image map highlight plug-in
$(‘#myimage’).maphilight();
});