[JavaScript] CSS cursor is not working on dynamically added map tag

See this answer if you are using chrome or Safari. Cursor not changing to pointer in Usemap/area case

I will add that your code is too complicated. You dont have to add style, id, shape and so on as attributes (attr.value = "cursor:pointer"; will probably never work at all). The code below works fine, results in a nice 1,1,100,100 map with cursor as pointer. But again works only in browsers like Opera and Firefox, but NOT in Chrome or Safari (WebKit).

var body=document.getElementsByTagName('body')[0];

var img = document.createElement("IMG");
img.src='1.gif';
img.useMap='#album_map';

var map = document.createElement("MAP");
map.id="album_map";
map.style.cursor="pointer"; //the right way

var area  = document.createElement("AREA");
area.shape='rect';
area.coords="1, 1, 100, 100";

map.appendChild(area);
body.appendChild(map);
body.appendChild(img);

adding standard events :

bind predefined function :

function imgClick() {
    alert('click');
}

body=document.getElementsByTagName('body')[0];
var img = document.createElement("IMG");
img.src='image.gif';
img.onclick=imgClick;
body.appendChild(img);

or by socalled anonymous function :

img.onclick=function() {
    alert('click');
}

[출처] http://stackoverflow.com/questions/13288553/css-cursor-is-not-working-on-dynamically-added-map-tag