Hello, i have probleme to generate <area> tags inside <map>, idea is quite simple:
I would like to take image and divide its map into 12 area depending on picture size(height, width)
Here is my code (not functional):

<body onload="load()">
<img id="img" src="IMAGES SRC" usemap="#map"/>
<map name="map" id="map"></map>
<script language='javascript'>
function load() {
img = getElementById(img);
var h2 = img.height/3;
var w1 = img.widht/4;
for (var i = 0; i <= 2; i++) {
var y = i*h2;
var p = ++i;
for (var j = 0; j <= 3; j++){
var x = j * w2;
var f = ++j;
el = document.createElement('area');
el.setAttribute('shape', 'rect');
el.setAttribute('id', j + i);
el.setAttribute('coords', x + ',' + y + ',' + f * w2 + ',' + p * h2);
el.setAttribute('href', j+i +'.html');
document.getElementById('map').appendChild(el);
};
};
};
</script>

Next question is if it is possible to make <area> active when i go with mouse over them.
THANK YOU for any help