Programatically creating imagemap via JS

[walshieau]

i have the following script to create an image, map and its areas

now adding the image to the div works fine, but when i try and append the map onto the image it returns a Unexpected call to method or property access JavaScript error.

personMap = document.createElement('map'); 
    personMap.setAttribute('name', 'newmap'); 
    personMap.setAttribute('id', 'newmap'); 
    var hotspots = Default.GetHotSpotDetails(MapNo); (AJAX call)
    for(var j=0; j < hotspots.value.length; j++)
    {
        var hs = hotspots.value[j].toString().split(':');
        area = document.createElement('area');
        area.setAttribute('id', j);
        area.setAttribute('shape', 'rect');
        var coords = hs[1]+','+ hs[2]+','+ hs[2]+','+ hs[1];
        area.setAttribute('coords', coords);
        area.setAttribute('href', "javascript:ShowUserPopup('+hs[3]+'|'+hs[1]+'|'+hs[2]+')");
        area.setAttribute('title', hs[0]);
        area.setAttribute('alt', hs[0]);
        personMap.appendChild(area);
    }
    image = document.createElement('img');
    image.setAttribute('src', 'PrinterMap.ashx?PhotoID=' + MapNo);
    image.setAttribute('ismap', 'ismap');
    image.setAttribute('useMap', '#newmap');
    image.setAttribute('id', 'PersonImageMap');
    image.appendChild(personMap); //error here
    document.getElementById('imgDiv').appendChild(image);

[acoder]

The map is separate from the image - it's not a child of the image. Just append it to the div instead.

[walshieau]

The map is separate from the image - it's not a child of the image. Just append it to the div instead.

cheers mate that worked. Im reading up on the use of anchors and image maps, i know the anchor object has shape and coords property, can one use an anchor instead of an area?

[acoder]

cheers mate that worked. Im reading up on the use of anchors and image maps, i know the anchor object has shape and coords property, can one use an anchor instead of an area?

I'm not sure. You can use an area as an anchor by setting the href property - see this link.