HTML JQuery Maphilight 没有突出显示 - 不知道为啥

Posted 2023-05-09

【中文标题】HTML JQuery Maphilight 没有突出显示 - 不知道为啥

【英文标题】：HTML JQuery Maphilight not hilighting - don't know whyHTML JQuery Maphilight 没有突出显示 - 不知道为什么

【发布时间】：2017-09-12 06:22:00

【问题描述】：

在我的页面http://www.veniria.esy.es/#veniria 上，我有一个带有 JQuery maphilight 插件的图像映射。在我将主页添加到站点之前，它工作得很好。现在它根本不起作用，就像 JQuery 没有检测到鼠标悬停一样，因为这也不起作用：

$('#linkAbhaeghar').mouseover(function(e) 
    $('#abhaegharMap').mouseover();
).mouseout(function(e) 
    $('#abhaegharMap').mouseout();
).click(function(e) 
    e.preventDefault(); 
);

右侧的按钮没有亮起。

【问题讨论】：

由于某种原因，地图上的画布的宽度和高度设置为零。如果您等待地图显示并在控制台中运行它： $('canvas').css( 'width': '', 'height': '' );它再次开始显示区域

很可能是您的第二页在页面加载时被隐藏了。

我知道它可能是，但为什么呢？我能用它做什么？

【参考方案1】：

当前您在准备好文档时运行$("#veniria").maphilight();。 但是在准备好文档时，地图是隐藏的，因此画布的宽度和高度设置为零。 您需要更改：

$("#pageMain").fadeIn(500);

收件人：

$("#pageMain").fadeIn(500, function()
    $("#veniria").maphilight();
);

两者都有

function hash() 
    if(window.location.hash == "#veniria") 
        $(".page").fadeOut(500).promise().done(function()
            $("#pageMain").fadeIn(500, function()
                $("#veniria").maphilight();
            );
        );
    

还有

$("#menuMain").click(function()
    $(".page").fadeOut(500).promise().done(function()
        $("#pageMain").fadeIn(500, function()
            $("#veniria").maphilight();
        );
    );
);