1

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

2 回答 2

3

这有效..我必须将“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>
​
于 2012-04-23T13:17:44.630 回答
0

这是使用 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 添加 jQuery（在 中<head></head>）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
于 2012-04-23T13:12:43.503 回答