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

我正在尝试使用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>

这是放在标题中的java脚本

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

函数showT（q）{
document.getElementById（'ima'）.setAttribute（'src'，'0'+q+'.jpg'））
} 

下面是一种使用jQuery的方法：

HTML:

JS（在

中）：

/*当鼠标位于任何具有“缩略图”类的HTML元素上时*/
$（“.thumbnail”）.mouseover（函数（）{
/*更改id为“bigpic”的元素的“src”属性*/
/*.data（）方法将获取存储在data-*属性中的图片id*/
$（“#bigpic”）.attr（“src”，“0”+$（this.data（“index”）+”.jpg”）；
});

您可以使用Google的repo（在

中）添加jQuery：

这很有效。。我必须在图像的id中添加“ima”，关闭图像标签。另外，我传递的是图像的位置，而不是索引，很简单，可以改变它

希望这有帮助，干杯

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

函数showT（图像）
{
document.getElementById（'ima'）.setAttribute（'src'，image）
}
​

是否调用了

showT（）

函数？Javascript控制台中是否有错误？你能用一个自包含的例子做一个简单的说明吗？另外，我相信

language=“JavaScript”

属性已经被弃用了，MIME类型应该都是小写的：

type=“text/JavaScript”

。我没有错误。在InternetExplorer中，脚本工作正常，只是不想加载新图像。在FireFox中，它根本不起作用。@stefan，id=“ima”正在进行更改。我对jQuery没有太多了解，到底做了什么？是的，我也是这么想的，这就是为什么我对代码进行了注释：）如果需要更多帮助，请不要犹豫。一旦您熟悉jQuery，就再也不会编写任何本机JS了：）如果我将缩略图图像包装到一个标记中，我还会向每个图像添加id=“缩略图”吗？或者它能分辨出来吗？它不是一个id，而是一个类。id在HTML文档中必须是唯一的。如果你这样做了，在你的div上放一个id，比如

，然后使用

$（“#缩略图包装器a”）。鼠标悬停
，而不是
$（“.thumbnail”）。鼠标悬停
。好吧，现在这完全让我心烦意乱了
.attr（“src”，“0”+$（this）.data（“index”）+“.jpg”）
<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>

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

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