使用缩略图，如何将主图片更改为缩略图？答案

【问题标题】：Using a thumbnail image, how do I change main picture to thumbnail image?使用缩略图，如何将主图片更改为缩略图？
【发布时间】：2012-04-23 13:03:28
【问题描述】：

我正在尝试使用 Javascript 来更改悬停图片。我有一个缩略图图像，当用户将鼠标悬停在顶部时，大图会发生变化，具体取决于悬停在哪个缩略图上。

这是我使用的 HTML。

<img onmouseover="showT(0)" src="pictures/278 Edit 10-8-11 2312.jpg" 
                    height="75" width="75" >
            <a href="#" onmouseover="showT(0)">pic 1</a>
            <a href="#" onmouseover="showT(1)">pic 2</a>
            <a href="#" onmouseover="showT(2)">pic 3</a>

这是放在header中的java脚本。

    <!-- onhover mouse for thumbNail -->
<script language="JavaScript" type="text/JavaScript"> 
function showT(q){ 
document.getElementById('ima').setAttribute('src','0'+q+'.jpg') 
} 
</script>

【问题讨论】：

你的showT() 函数被调用了吗？您在 Javascript 控制台中是否遇到任何错误？你能用一个独立的例子做一个jsFiddle吗？
另外，我认为language="JavaScript" 属性已被弃用，MIME 类型一应全部小写：type="text/javascript"。
我没有错误。在 Internet Explorer 中，该脚本有效，它只是不想加载新图像。在 FireFox 中它根本不起作用。
@stefan, id="ima" 在图片中得到改变

标签： javascript html css image onhover

【解决方案1】：

这行得通..我必须将“ima”添加到图像的 id 中，关闭图像标签。另外，我传递的是图像的位置，而不是索引，更改它很简单。

希望这会有所帮助，干杯。

<img id="ima" src="http://www.google.com/images/srpr/logo3w.png" height="75" width="75"/>

<a href="#" onmouseover="showT( 'http://www.google.com/logos/2012/cossington_smith-12-hp.jpg' )">pic 1</a>
<a href="#" onmouseover="showT( 'http://www.google.com/logos/2012/earthday12-hp.jpg' )">pic 2</a>
<a href="#" onmouseover="showT( 'http://www.google.com/logos/2012/Friedrich_Frobel-2012-hp.jpg' )">pic 3</a>

<script type="text/javascript">
    function showT( image )
    {
         document.getElementById( 'ima' ).setAttribute('src',image ) 
    }
</script>

【讨论】：

【解决方案2】：

这是一种使用 jQuery 的方法：

HTML：

<img src="my-initial-picture.jpg" alt="Any alternative text" id="bigpic" />
<!-- store the id of the picture that should be displayed in a data-* attribute -->
<a href="#" class="thumbnail" data-index="0">pic 1</a>
<a href="#" class="thumbnail" data-index="1">pic 2</a>
<a href="#" class="thumbnail" data-index="2">pic 3</a>

JS（在<head></head>）：

<script>
/* when mouse is over any HTML element that has a "thumbnail" class */
$(".thumbnail").mouseover(function() {
    /* change the "src" attribute of the element whose id is "bigpic" */
    /* the .data() method will get the picture id stored in the data-* attribute */
    $("#bigpic").attr("src", "0" + $(this).data("index") + ".jpg");
});
</script>

您可以使用 Google 的 repo (in <head></head>) 添加 jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

【讨论】：

我对 jQuery 的了解不多，究竟是什么？
是的，我也是这么想的，这就是我评论代码的原因 :) 如果您需要更多帮助，请不要犹豫。一旦你熟悉了 jQuery，你就再也不会写任何原生 JS 了:)
如果我将缩略图图像包装到
标记中，我是否仍需要将 id="thumbnail" 添加到每个图像？或者它会说出来吗？
它不是一个id，而是一个类。一个 id 在您的 HTML 文档中必须是唯一的。如果这样做，请在您的 div 上添加一个 id，例如 <div id="thumbnail-wrapper"> 并使用 $("#thumbnail-wrapper a").mouseover 而不是 $(".thumbnail").mouseover。
好吧，现在这完全让我想不通了....attr("src", "0" + $(this).data("index") + ".jpg");