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!
