0

今のところすべての回答を調べましたが、解決策が見つかりません。

これは私が作成しようとしているものです。1ページに複数のロールオーバー画像があり、すべてのロールオーバー画像にはホームページの特定の部分への独自のURLがあります。

私が欲しいのは、マウスをその上に移動すると2番目の画像が表示され、3000ミリ秒に達するまでURLへのリダイレクトを遅らせてから、ユーザーをURLにリダイレクトすることです。ただし、遅延はマウスアウトで停止する必要があり、ユーザーをリダイレクトせず、最初の画像を再度表示します。すべてのロールオーバー画像は同じページで同じことを行う必要がありますが、各ロールオーバーには独自の URL があります。

方法に関する情報を手伝ってくれる人..

4

1 に答える 1

0

CSS と:hoverで画像の変更を行い、次のように JavaScript でリダイレクトとタイムアウトを行います。

// markup
<a id="my_image_1" class="hover_linker" href="some_link_to_the_homepage.html"></a>

// styles
.hover_linker {
    width:363px;
    height:300px;
    display:block;
}
#my_image_1 {
    background-image: url('some-image.jpg');
}
#my_image_1:hover {
    background-image: url('another-image.jpg');
}

// scripts
var redirectTimeout;
$(document).ready(function() {
    $('a.hover_linker').mouseover(function(e){
        redirectTimeout = window.setTimeout(function () {
            window.location.href = $(e.target).attr("href");
        }, 3000);
    }).mouseout(function(){
        window.clearTimeout(redirectTimeout);
    });
});
于 2012-06-17T23:16:54.010 に答える