Image map not working in greasemonkey script

Question

I created a greasemonkey script where I add a banner to a web page. First I started with the plain image and worked fine. Then I wanted to add an image map to create the effect of a toolbar. The page loads, the script executes, looks good in firebug, but not picking up the clicks. If I add an onclick to the image, the image gets the click. Not the area. Any guidance appreciated

var input=document.createElement("img");
input.src="http://.../banner_gh.png";

var map = document.createElement("map");
map.name = "barMap";
map.id   = "barMap";

var trialArea = document.createElement("area");

trialArea.shape  = "rect";
trialArea.coords = "675,0,766,50";
trialArea.href   = "https://apps..../.../foo";
trialArea.title  = "Start Trial";
trialArea.alt  = "Start Trial";
trialArea.onclick = startTrial;


map.appendChild(trialArea);
input.useMap = "#barMap";

// inserting the image in the right place in my page
var container = document.getElementById("overview");
container.parentNode.insertBefore(input,container); 


function startTrial()
{
    document.location.href = "https://apps..../.../foo";
}

Using Firefox 17, and Greasemonkey 1.11 thanks

Answer 1

It seems like you simply forget to insert your map into the page. Try add

container.parentNode.insertBefore(map,container);

Hope it helps.