Image Map links not firing in a jQuery UI dialog (IE only)

Question

I'm attempting to place an image map into a jQuery UI dialog. Initially, the and are hidden on the page so that I don't have to do any AJAX. When the dialog is triggered, the and are placed in the dialog and the hidden original content has its link to the image map removed.

There are a few links on the image map in tags and in Firefox, Chrome etc the links are positioned correctly and work.

However, in all versions of IE (the web site is SharePoint 2007 and compatibility mode is on), the links do not fire on the image map. You can hover over the rectangles and be shown the link, but the action never fires.

Code used to initialise below:

$(document).ready(function() { 
    $('.processDiagram').click(function() {
        var phase = $(this).attr('title');
        var text = $('#'+phase+' div').html();
        var mapname = $('#'+phase+' map').attr('name');
        $('#'+phase+' map').attr('name', ''); // null out the background map name so it doesn't get confused

        var $dialog = $('<p></p>').html(text).dialog({modal:true, autoOpen:false, width:620, title:phase, beforeClose: function(event, ui) { $('#'+phase+' map').attr('name', mapname); }});
        $dialog.dialog('open');
        return false; // So firefox won't just follow the link
    }
}

I could really do with some help here as I have no idea why the links aren't firing.

Thanks, Steve