Question

这是单一的任务，我已经做了一些事情。请转到my server

上的密码保护目录

在提示中输入用户名“uts”和密码“10479475”，两者都没有引号，您将能够看到该网页。

基本上，如果将鼠标悬停在worldmap中的内容顶部的左上角，则可以看到底部区域被灰色区域和红色边框“突出显示”。这是使用一个jQuery插件完成的：at here

这部分工作正常，但是，在我使用jQuery异步加载特定的大陆地图后，新加载的图像无法正常工作。在Firebug下测试，我可以看到插件没有“喜欢”新图像，因为我找不到画布或其他自动生成的东西，可以在世界地图周围建立。

所有功能都在master.js中完成，我相信你可以下载副本并检查那里的代码。我希望我已经按照插件的doc页面上的教程，但我无法完成最后阶段。

用于html中的worldmap的代码：

<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>

master.js中用于worldmap的代码

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

相比之下，用于特定大陆地图的代码：

//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!');
});

}

对于凌乱的代码感到抱歉，还没有重构它。

我想知道为什么画布为大陆地图消失了。我做错了什么。

非常感谢任何提示，并感谢您提前提出任何建议！

Answer 1

如果我在Firefox的JavaScript控制台中键入$('.citymap').maphilight();，这一切都很有效你过早地调用它 - 看起来你在将<img>添加到DOM之前调用它。

Answer 2

查看您提供的代码，问题似乎是您尝试在调用它的元素之前调用maphilight。

图片仅在$(img).load运行后添加到DOM中，因此$('.citymap').maphilight();可能应该放在那里。

jQuery Map Highlight - 在DOM准备好的情况下正常工作但在由AJAX加载时失败

2 个答案: