JavaScript ロールオーバーで機能する小さな画像ギャラリーをセットアップしました。また、画像を拡張するために jquery を少し追加しました。私の問題は、すべてが Firefox で完全に機能することですが、IE や Chrome では機能しません。すべてが IE と Chrome で表示されますが、サムネイルをクリックすると大きな画像が表示されません。
現在のページ コード:
<a href="#" onmouseup = "window.document.gallery.src = 'images/Gallery/Landscapes_Album/slides/Tern Lake Sunset.jpg'">
<img src="images/Gallery/Landscapes_Album/thumbs/Tern Lake Sunset.jpg" width="80" height="80" class="gallery-thumb" id="In"/></a>
現在のjqueryコード:
// jQuery fade-in and fade-out
$(function() {
// OPACITY OF BUTTON SET TO 50%
$(".gallery-thumb").css("opacity","0.5");
// ON MOUSE OVER
$(".gallery-thumb").hover(function () {
// SET OPACITY TO 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
},
// ON MOUSE OUT
function () {
// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0.5
}, "slow");
});
});