Question

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

Answer 1

这有效..我必须在图像的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>

Answer 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的回购添加jQuery（<head></head>）：

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

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

2 个答案: