2013-03-26 86 views
0

當鼠標懸停時,我有一個圖像淡入另一個圖像。第二個圖像具有用戶將遵循的鏈接的圖像映射。每次我嘗試點擊地圖鏈接時,圖像都會淡入原始的第一張圖像。這是我的代碼到目前爲止。幫助凍結一個鼠標懸停褪色

<script type='text/javascript' src='../js/jquery-1.9.1.min.js'> 

</script> 
<script type='text/javascript'> 
$(document).ready(function(){ 

$("img.a").hover(
function() { 
$(this).stop().animate({"opacity": "0"}, "slow"); 
}, 
function() { 
$(this).stop().animate({"opacity": "1"}, "slow"); 
}); 
}); 
</script> 
<style> 
div.fadehover { 
    position: relative; 
    } 

img.a { 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 10; 
    } 

img.b { 
    position: absolute; 
    left: 0; 
    top: 0; 
    } 
</style> 
</head> 

<body> 
<div class="fadehover"> 
<img src="../Background.jpg" alt="" class="a" usemap="#Map" border="0"/> 
<img src="../optiontwo.jpg" alt="" class="b"/> 
<map name="Map" id="Map" class="maps"> 
    <area shape="rect" coords="100,488,195,540" href="https://vimeo.com/lsufilmclub" /> 
    <area shape="rect" coords="87,433,202,489" href="http://www.youtube.com/user/LSUFilmClub" /> 
    <area shape="rect" coords="702,440,834,493" href="https://www.facebook.com/LSUFilmClub" /> 
    <area shape="rect" coords="711,493,805,562" href="https://twitter.com/LSUFilmClub" /> 
</map> 
</div> 
</body> 
+0

你能向我們展示一個小提琴並更好地解釋它嗎? – 2013-03-26 03:42:04

+0

基本上我有2張圖片。第一種淡入第二種,第二種則在其上映射鏈接。當我將鼠標懸停在鏈接上時,第一張圖像會再次出現。我想停止 – Cubatown 2013-03-26 03:45:47

+0

爲此,您需要向我們展示演示,並且我們可以說出您可能出錯的位置。 :) – 2013-03-26 03:48:53

回答

1

您可能需要停止點擊0不透明度的元素。一種解決方案可能是這樣的:

$('img.a').click(function(event) { 
    if ($(this).css('opacity')==0) { event.preventDefault() }; 
}); 

然而,這仍然會從發生到它下面的元素阻止點擊。取決於你如何有事情成立,你可以改爲添加一個額外的回調函數隱藏完全一旦它的淡出元素,因此點擊都是通過它,沿着這些路線的東西:

function() { 
    $(this).stop().animate({"opacity": "0"}, "slow", function() { $(this).hide(); }); 
}, 
function() { 
$(this).stop().animate({"opacity": "1"}, "slow", function() { $(this).hide(); }); 
}); 
+0

謝謝!很棒! – Cubatown 2013-03-26 04:25:37

0

我可能誤會你的意圖,但在你給我們的代碼鏈接(圖像地圖)的代碼正在淡出。我認爲你想要:

$("img.b").hover(
function() { 
$(this).stop().animate({"opacity": "0"}, "slow"); 
}, 
function() { 
$(this).stop().animate({"opacity": "1"}, "slow"); 
}); 

img.a { 
    position: absolute; 
    left: 0; 
    top: 0; 

    } 

img.b { 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 10; 
    } 
+0

,使它倒退。 http://lsufilmclub.com/test/這是我得到的解決方案,我不希望鏈接淡出 – Cubatown 2013-03-26 04:11:28

+0

啊,我明白你爲什麼這樣做... – mwielbut 2013-03-26 04:24:45