0

これが私がやろうとしていることです。サムネイル画像のテーブルと、テーブルの中央にある大きな画像があります。

img01 |  img02 | img03 | img04

img05 | `*BIG IMAGE *` | img06

img07 | `*BIG IMAGE *` | img08

img09 | `*BIG IMAGE *` | img10

img11 | `*BIG IMAGE *` | img12

img13 |  img14 | img15 | img16

サムネイル画像にカーソルを合わせると:

1) サムネイルの不透明度が 50% から 100% に変更され、かつ
2) BIG IMAGE が img01 の 400x400 画像に変更されます (つまり、img01_400x400.jpg)

サムネイル画像もクリックすると、「BIG IMAGE」が400x400の画像に変わります

ホバー時にサムネイル画像の不透明度が変化する手順(1)までは、正しくコーディングできました。

ステップ（2）を達成する方法を知っている人はいますか？どんな助けでも大歓迎です。私はこれに数日間立ち往生しています。

マイク

コメントから追加されたコード スニペット

これは私がこれまでにcssのために持っているものです:

.hovereffect img { opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; } 
.hovereffect:hover img { opacity:1.0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1; }

これは、サムネイルの 1 つのコードのスニペットです。

<td align="center">
    <a class="hovereffect" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="/ad01.php"><img style="cursor: pointer; width: 66px; height: 66px;" src="/images/ad_01d.png" alt="Hover Effect" id="" border="0" /></a>
</td>
4

1 に答える 1

0

これは良いフェード効果です。背景画像の上にある画像をフェードアウトします。うまくいけば、それはあなたを始めることができます.

http://jsfiddle.net/Diodeus/gYyBL/

HTML:

<img src="http://i.imgur.com/vdDQgb.jpg" hoverImg="http://i.imgur.com/Epl4db.jpg" bigImg="http://i.imgur.com/Epl4db.jpg">
<img src="" style"display:none" id="big">

JS:

$('body').find('*[hoverImg]').each(function(index){
    $this = $(this);
    $this.wrap('<div>')  ;   
    $this.parent().css('width',$this.width()) ; 
    $this.parent().css('height',$this.width());
    $('#big').attr('src',$this.attr('hoverImg')); <-- this will show the big image;
    $this.parent().css('background-image',"url(" + $this.attr('hoverImg')+")")
        $this.hover(function() {
            $(this).stop()
            $(this).fadeTo('',.01)    
        },function() {
            $(this).stop()
            $(this).fadeTo('',1)             
        })                    
});

な

于 2012-10-02T19:15:24.910 に答える