图像交换不返回原始图像答案

【问题标题】：image swap doesnt return to original image图像交换不返回原始图像
【发布时间】：2011-12-30 03:55:22
【问题描述】：

我有一个 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

谢谢！！

【问题讨论】：

标签： javascript jquery html mouseover jquery-hover

【解决方案1】：

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

将onmouseout="MM_swapImgRestore()" 添加到最后一个图像的父<a> 可以使其恢复。

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

【讨论】：

【解决方案2】：

底部图像<a> 标记没有onmouseout="MM_swapImgRestore()" 事件。包括它，一切都会正常工作。

【讨论】：