0

リンクがクリックされたときに画像を単純に交換するこのコーディングのピースがあります。また、画像の上に配置された非表示の html コンテンツも表示します。

 <script>
if($.browser.msie && parseInt($.browser.version) <= 6){
$('#contentone, #contenttwo, #contentthree, #contentfour, .linksBackground').hide();
}

$('#contentone, #contenttwo, #contentthree, #contentfour').hide();

$("#linkone").click(function() {
    $('#contenttwo, #contentthree, #contentfour').hide("1500");
    $("#imageone").attr("src","Resources/Images/TEMP-homeOne.jpg");
    $("#contentone").show("1500");
});
$("#linktwo").click(function() {
    $('#contentone, #contentthree, #contentfour').hide("1500");
    $("#imageone").attr("src","Resources/Images/TEMP-homeTwo.jpg");
    $("#contenttwo").show("1500");
});
$("#linkthree").click(function() {
    $('#contentone, #contenttwo, #contentfour').hide("1500");
    $("#imageone").attr("src","Resources/Images/TEMP-homeThree.jpg");
    $("#contentthree").show("1500");
});
$("#linkfour").click(function() {
    $('#contentone, #contenttwo, #contentthree').hide("1500");
    $("#imageone").attr("src","Resources/Images/TEMP-homeFour.jpg");
    $("#contentfour").show("1500");
});
</script>

ユーザーがリンクをロールオーバーしたときに小さなサムネイル画像を表示するようにこれをさらに変更する方法を知っている人はいますか?

どこに行けばいいのかわからないので、ヒントが必要です...マウスオーバーでそれを達成できますか？

4

1 に答える 1

2

jQuery には、マウスオーバーとマウスアウトを組み合わせた hover メソッドがあります。サムネイルを取得してマウスオーバーで表示し、マウスアウトでサムネイルを非表示にする関数をリンクに追加できます。

$('yourlink').hover(function(){
    // display the thumbnail
}, function(){
    // hide the thumbnail
});

サーバー上に画像のサムネイルを作成する必要があります (これは自動的に行うことができますが、そこで使用している言語はわかりません)。

または、実際の画像を表示するだけで、サイズを変更して表示時に縮小することもできます。これらが大きな画像の場合、読み込み時間が長くなることに注意してください。古いバージョンの IE は、画像のサイズをうまく変更できません。このトリックを使用して、スムーズなサイズ変更を有効にすることを検討してください。

IE でのバイキュービック スケーリング

于 2010-05-27T11:26:08.007 に答える