jquery - 悬停时更改多个图像 : jquery/css/html

Question

这就是我想要做的。我有一张缩略图表格，表格中间有一张大图。

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)

当您同时单击缩略图时，“大图像”将变为 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; }

这是其中一个缩略图的一段代码片段:

<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>

Answer 1

这是一个很好的淡入淡出效果。它淡出背景图像之上的图像。希望它可以帮助您入门。

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