0

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");
  });
});
4

2 に答える 2

0

クロムのエラーは「未定義の属性srcを設定できません」です。これは、式window.document.galleryが何にも評価されないためです。MrOBrian が指摘したように、これがどのブラウザーでもどのように機能するかはわかりません。

html の別の実装は次のようになります。

<a href="#" onmouseup="$(this).find('img').attr('src', 'yourimage.jpg')">
    <img src="http://placekitten.com/80/80" width="80" height="80" class="gallery-thumb" id="In"/></a>​

...ただし、JavaScriptのどこかでそれを行うだけの場合は、より標準的になります:

$(".gallery-thumb").parent().mouseup(function() {
    $(this).find('img').attr('src', 'yourimage.jpg');
});

私はあなたがそれをいじるためにjsFiddleをセットアップします：http://jsfiddle.net/ZfkeU/10/

于 2012-07-26T01:39:04.033 に答える
0

この効果には css を使用します。

<a href="#">
<img class="img1" .../>
<img class="img2" .../>
</a>

CSS:

a{position:relative;}
a img{position:absolute;top:T;left:L;}
a img.img1{ z-index:101;}
a img.img2{ z-index:100;}
a:hover img.img1{ display:none;}

より簡単でクリーンです...

于 2012-07-26T02:51:18.413 に答える