图像交换不会返回原始图像

时间:2011-12-30 03:55:22

标签: javascript jquery html mouseover jquery-hover

我有一个javscript图像交换,可以毫无问题地在悬停时交换图像。我实现了highslide.js,现在底部图像不会返回鼠标输出时的原始图像。

有什么建议吗?

我的脚本如下

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  <script src="js/jquery-1.3.2.js" type="text/javascript"></script>
  <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
  <script type="text/javascript" src="js/jquery.jwbox.js"></script>
  <script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
  <script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>

和我的HTML

<a id="gallery-opener" href="javascript:;" onclick="document.getElementById('thumb1').onclick()" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('lodge','','Images/river_over.png',1)">
            <img src="Images/river_up.png" name="lodge" width="340" height="167" border="0" id="lodge" /></a> 

        <a id="gallery-opener" href="javascript:;" onclick="document.getElementById('thumb2').onclick()" onmouseover="MM_swapImage('catch','','Images/catch_over.png',1)">
        <img src="Images/catch_up.png" name="catch" width="340" height="167" border="0" id="catch" /></a>

你可以在这里看到一个例子 http://www.flyfishinggreyriver.com/index2.html

谢谢!!

2 个答案:

答案 0 :(得分:0)

您必须在某个时候从该图片的父级中删除onmouseout属性。

onmouseout="MM_swapImgRestore()"添加到最后一张图片的父<a>可以让它恢复。


您知道,您可以使用CSS进行图像翻转过渡,这比JavaScript要容易得多 您还有多个具有相同ID的项目,应该避免使用。

答案 1 :(得分:0)

您的底部图片onmouseout="MM_swapImgRestore()"标记没有<a>个事件。包括这一点,一切都会正常。