Question

我正在寻找一个javascript选项，它允许我鼠标悬停缩略图以替换＆＃34;大＆＃34;图片。这里的技巧是使用缩略图链接中的锚点href作为大图像源。我需要这个才能用于多个实例。

如果有帮助，可以删除<img src="large1.jpg">等

以下是我正在使用的HTML代码的简化版本。此代码无法更改。

每个id和class都可以是唯一的。

<div class="image-1">
    <img src="large1.jpg">
</div>


<div id="thumbs">
    <a id="thumb_1" href="large1.jpg" title="1"><img src="small1.jpg" alt="image 1"/></a>
    <a id="thumb_2" href="large2.jpg" title="2"><img src="small2.jpg" alt="image 1"/></a>
    <a id="thumb_3" href="large3.jpg" title="3"><img src="small3.jpg" alt="image 1"/></a>
</div>

... 

<div class="image-2">
    <img src="large2.jpg">
</div>

<div id="thumbs">
    <a id="thumb_1" href="another_large1.jpg" title="1"><img src="anout_small1.jpg" alt="image 1"/></a>
    <a id="thumb_2" href="another_large2.jpg" title="2"><img src="another_small2.jpg" alt="image 1"/></a>
    <a id="thumb_3" href="another_large3.jpg" title="3"><img src="another_small3.jpg" alt="image 1"/></a>
</div>

...

Answer 1

我只想使用CSS :hover选择器。然后，您可以为图像添加动画和其他很酷的东西。

EXAMPLE HERE

Answer 2

检查此解决方案 http://jsfiddle.net/dtdaynjp/

添加到所有“大”图像的唯一类，图像-1，图像-2，图像-3 ..

为每个拇指链接添加类似适当的大图像：thumb-image-1，thumb-image-2，thumb-image-1 ...

添加此jQuery代码：

$(function() {

    $(".mouseover a").mouseover(function(){
        var src=$(this).attr('href');
        var classs=$(this).attr('class');
        classs=classs.substr(6);        
        $('.'+classs).find('img').attr('src',src);

    })

})

Javascript：鼠标悬停缩略图以查看大图 - 多个实例

2 个答案:

EXAMPLE HERE