jQuery Map Highlight - works fine at DOM ready but failed when loaded by AJAX

Question

Hi all:

This is uni assignment and I have already done some stuff. Please go to the password protected directory on : my server

Enter username "uts" and password "10479475", both without quotes, into the prompt and you shall be able to see the webpage.

Basically, if you hover your mouse on top of the contents in worldmap to the upperleft corner, you can see the underneath area is "highlighted" by a gray region and a red border. This is done using one jQuery plugin : at here

This part works fine, however, after I use jQuery to load the specific continent map asynchronously, the newly loaded image cannot work correctly. Tested under Firebug, I can see the plugin doesn't "like" the new image cause I cannot find the canvas or other auto-generated stuff which can be founded around the worldmap.

All the functionality is done in master.js, I believe you can just download a copy and check the code there. I do hope that I have followed the tutorials on the plugin's doc page, but I just cannot get through the final stage.

Code used for worldmap in html:

<img id="worldmap" src="./img/world.gif" alt="world.gif" 
width="398" height="200" class="map" usemap="#worldmap"/>
<map name="worldmap">
<area class='continent' href="#" shape="poly" title="North_America" 
coords="1,39, 40,23, 123,13, 164,17, 159,40, 84,98, 64,111, 29,89" />
    </map>

Code used for worldmap in master.js

//when DOM is ready, do something
$(document).ready(function()
{   
    $('.map').maphilight(); //call the map highlight main function
}

On contrast, code used for specific continent map:

//helper function to load specific continent map using AJAX
function loadContinentMap(continent)
{
$('#continent-map-wrapper').children().remove();    //remove all children     nodes first

//inspiration taken from online : http://jqueryfordesigners.com/image-loading/
$('#continent-map-wrapper').append("<div id='loader' class='loading'><div>");

var img = new Image();  // wrap our new image in jQuery, then:

// once the image has loaded, execute this code
$(img).load(function () 
{    
  $(this).hide();   // set the image hidden by default

  // with the holding div #loader, apply:
  // remove the loading class (so no background spinner),
  // then insert our image
  $('#loader').removeClass('loading').append(this);

  // fade our image in to create a nice effect
  $(this).fadeIn();
}).error(function () 
{
    // if there was an error loading the image, react accordingly
    // notify the user that the image could not be loaded
    $('#loader').removeClass('loading').append("<h1><div class='errormsg'>Loading image failed, please try again! If same error persists, please contact webmaster.</div></h1>");
})
//set a series of attributes to the img tag, these are for the map high lighting plugin.
.attr('id', continent).attr('alt', '' + continent).attr('width', '576').attr('height', '300')
.attr('usemap', '#city_' + continent).attr('class', 'citymap').attr('src', './img/' + continent + '.gif');
// *finally*, set the src attribute of the new image to our image

//After image is loaded, apply the map highlighting plugin function again.
$('.citymap').maphilight();

$('area.citymap').click(function()
{
    alert($(this).attr('title') + ' is clicked!');
});

}

Sorry about the messy code, havn't refactored it yet.

I am wondering why the canvas disappers for the continent map. Did I do anything wrong.

Any hint is much appreciated and thanks for any suggestion in advance!

Answer 1

This all works well if I type $('.citymap').maphilight(); into Firefox's JavaScript console.
You are calling it too early - it looks like you call it before adding the <img> to the DOM.

Answer 2

Looking at the code you provided, the problem does seem to be that you're trying to call maphilight before the element it's called on exists in the DOM.

The image is only added to the DOM after $(img).load has run, so $('.citymap').maphilight(); should probably go in there.