2017-10-21 54 views
0

我有以下功能:区高亮鼠标移开

<script type="text/javascript"> 
$("img[usemap]").mapify(); 

$(window).resize(function(){ 

    setTimeout(function(){ 
    $("#map area").eq(1).trigger("mouseenter.mapify").trigger("focus.mapify").trigger("touchend.mapify"); 
    $(".mapify-svg polygon").eq(1).css("stroke","#09f"); 
    },5000); 

}).resize(); 
</script> 

此功能突出使用行程5秒后的特定区域(使用mapify)。

这是完全功能,但我似乎无法找到一种方法来适应功能,包括mouseout功能。

基本上,我需要5秒后该区域突出显示,它保持突出显示2秒,然后再次熄灭,重复自身。

我对JS和图像映射相当陌生,但我可以提供任何可能有所帮助的附加信息。

我正在从事的这个项目位于https://sporedev.ro/pleiade

回答

1

使用以下

function blinkIn() { 
    setTimeout(function() { 
    $("#map area").eq(1).trigger("mouseenter.mapify").trigger("focus.mapify").trigger("touchend.mapify"); 
    $(".mapify-svg polygon").eq(1).css("stroke", "#09f"); 
    blinkOut(); 
    }, 5000); 
} 

function blinkOut() { 
    setTimeout(function() { 
    $("#map area").eq(1).trigger('mouseout.mapify'); 
    blinkIn(); 
    }, 2000); 
} 

blinkIn(); 

但不要把在.resize处理程序,将触发多次,同时调整和搞砸了。

+0

谢谢!它可以工作,但由于某种原因,而不是在鼠标触发时消失,它会形成一个奇怪的轮廓。如果你可以查看https://sporedev.ro/pleiade/并查看第二个雕像(你必须等待3秒钟),并告诉我你是否有任何想法,请确认。 :) – SporeDev