(JS)Как сделать <map> и <area>

У меня боольшой вопрос можноли как нибудь тег <map>и <area> организовать в javascript

Вот кусок кода рисунка надо на него наложить карту а как сделать подскажите плиз



function Map(_basesrc, _rows, _cols, _clientWidth, _clientHeight, _width, _height)
{
this.map = window.document.createElement("div");
this.mapcontainer = window.document.createElement("div");



this.mapTable = window.document.createElement("table");




this.mapcontainer.appendChild(this.mapTable);

this.mapcontainer.style.position = "absolute";
this.mapcontainer.style.pixelLeft = 0;
this.mapcontainer.style.pixelTop = 0;

this.mapTable.cellSpacing = 0;
this.mapTable.cellPadding = 0;
this.mapTable.border = 0;


for(var i=0;i<_rows;i++)
{
var tr = this.mapTable.insertRow();
for(var j=0;j<_cols;j++)
{
var td = tr.insertCell();

////не уверен что правельно сделал этот кусок /////////////

this.maparea = window.document.createElement("map");
this.area =window.document.createElement("area");
this.maparea.appendChild(this.area);
this.maparea.name="are";

this.area.shape="poly";
this.area.coords="540,146,644,166,646,267,544,292,499,239";
this.area.href="#";
////////////////////////////////////////////

var img = window.document.createElement("img");
_basesrc = _basesrc.replace(/\$x/, i);
_basesrc = _basesrc.replace(/\$y/, j);
img.src = _basesrc;
//// img.usemap = "#are"; ////это тоже





td.appendChild(img);

}
}
this.minimap = null;

this.clientWidth = _clientWidth;
this.clientHeight = _clientHeight;

this.width = _width;
this.height = _height;

this.rows = _rows;
this.cols = _cols;

this.mapmovetimer = null;
this.movespeed = 20;

this.ScrollLock = false;

this.owner ="ID" + this.map.uniqueID;
eval(this.owner + "=this");

this.map.appendChild(this.mapcontainer);
this.map.style.clip="rect(0 "+this.clientWidth+" "+this.clientHeight+" 0)";
this.map.style.position = "absolute";
this.map.style.width = this.clientWidth;
this.map.style.height = this.clientHeight;
this.map.style.pixelLeft = 0;
this.map.style.pixelTop = 0;
this.map.style.zIndex = 0;
this.resize = function(_clientWidth,_clientHeight)
{
this.clientWidth = _clientWidth;
this.clientHeight = _clientHeight;
this.map.style.clip="rect(0 "+_clientWidth+" "+_clientHeight+" 0)";
this.map.style.width = _clientWidth;
this.map.style.height = _clientHeight;
}


this.getX = function()
{
return this.mapcontainer.style.pixelLeft;
}


this.getY = function()
{
return this.mapcontainer.style.pixelTop;
}


this.setX = function(x)
{
this.mapcontainer.style.pixelLeft = x;
}


this.setY = function(y)
{
this.mapcontainer.style.pixelTop = y;
}


this.setPos = function(x,y)
{
this.setX(x);
this.setY(y);
}


this.scrollTo = function(_x, _y)
{
this.MoveStop();
if(_x>this.width-this.clientWidth/2) _x = this.width - this.clientWidth/2;
if(_y>this.height-this.clientHeight/2) _y = this.height - this.clientHeight/2;
var x = _x - this.clientWidth/2;
x = x>0 ? -x : 0;
var y = _y - this.clientHeight/2;
y = y>0 ? -y : 0;
this.scrollto(this.getX(),this.getY(),x,y);
}

this.scrollto = function(x0,y0,x1,y1)
{
if(x0==x1 && y0 ==y1)
{
this.MoveStop();
return;
}
var x = Math.abs(x0-x1);
var y = Math.abs(y0-y1);
var s = Math.sqrt(x*x+y*y);
this.movespeed = s>100 ? 30 : 10;
var sx = this.movespeed * (x/s);
var sy = this.movespeed * (y/s);
x0<x1 ? x0 += sx : x0 -= sx;
y0<y1 ? y0 += sy : y0 -= sy;

if(x<sx)
x0 = x1;
if(y<sy)
y0 = y1;

this.setPos(x0,y0);
this.minimap.AreaMove(-x0*this.minimap.zoomX, -y0*this.minimap.zoomY);

if(x0==x1 && y0 ==y1)
{
this.MoveStop();
return;
}
this.mapmovetimer = window.setTimeout(this.owner+".scrollto("+x0+","+y0+","+x1+","+y1+")",100);
}

this.MoveStop = function()
{
window.clearTimeout(this.mapmovetimer);
this.mapmovetimer = null;
}

}
а да вот сам пример http://middle-ages.ru/testm/test.htm