NOT WORKING code follows:

<div id="d"></div>

...

<script>

$(document).ready(function() {

$('#d').append('<img id="i" usemap="#m" style="border:1px solid #000;width:400px;height:200px" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />');

$('#d').append('<map name="m" id="m"></map>');

$('#m').append('<area coords="0,0,400,200" shape="rect" href="javascript:void(0)">');

});

</script>

WORKING code follows:

...

change the map creation (using append) with basic stuff:

var oMap = document.createElement('map');

oMap.setAttribute('id', 'm');

oMap.setAttribute('name', 'm');

document.getElementById('d').appendChild(oMap);

Hints/notes:

1. It's not because dynamic IMG or inline data of IMG

2. It's not because order of append call on IMG vs MAP

3. Strangely, the code works with jQuery 1.3.2 (both using the workaround with the append(<map><area></map>).contents()) or just plain innerHTML

Thanks,

Adrian