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

Answer 1

So, the reason is the layout being position:relative does a number on IE, moving all of the hotspots to be relative to the body and not to the image map itself.

Solution is to fix that layout issue.