0

マウスオーバーすると、画像が別の画像にフェードインします。2番目の画像には、ユーザーがたどるリンクの画像マップがあります。マップリンクをクリックしようとするたびに、画像は元の最初の画像にフェードバックします。これが私のこれまでのコードです。ヘルプ

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

2 に答える 2

1

不透明度が0の要素がクリックされないようにする必要がある場合があります。1つの解決策はこれかもしれません：

$('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(); });
});
于 2013-03-26T03:53:42.907 に答える
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;
    }
于 2013-03-26T04:05:52.877 に答える