如何使用 onmouseover 在不同位置更改图像以恢复为网站上的默认图像？答案

【问题标题】：How to change image with onmouseover in different place that reverts back to default image on the site?如何使用 onmouseover 在不同位置更改图像以恢复为网站上的默认图像？
【发布时间】：2012-11-10 20:04:58
【问题描述】：

我不是这方面的专家，所以如果这是非常基本的但我找不到答案，请原谅。

所以我想在页面左侧有带有类别的导航部分。每个类别都是不同的站点，每个站点都有自己独特的图像。前任。 category1.htm 有 defaultpic1.jpg，category 2.htm 有 defaultpic2.jpg，....

当我将鼠标悬停在导航部分中指向 category2 的链接上时，我希望他们将当前站点上的默认图像更改为 category2 上的默认图像，然后在 onmouseout 上我希望它返回到默认图像。

还要注意我的图片有不同的尺寸、不同的高度值。

基本上我知道我可以更改每个页面上的 defaultpic 源，但我想使用相同的脚本，它总是知道要查找默认路径并直接使用它，而无需更改每个类别中的行.

对不起，如果我不是很清楚，但我会尽力而为。

我有这个（删除了其他所有内容，所以我只是粘贴了我需要帮助的内容）：

<html>
<head>
<script type="text/javascript">
          function mouseOverImage2()
{
    document.getElementById("catPic").src='images/defaultpic2.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='420px';;
}  function mouseOverImage3()
{
    document.getElementById("catPic").src='images/defaultpic3.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='266px';;
}
function mouseOutImage()
{
    document.getElementById("catPic").src='???'; //here's what I don't know what to put
}
</script>
</head>
<body>
<div class="nav">
          <ul>
              <li><a href="subcategory2.htm" onmouseover="mouseOverImage2()"
    onmouseout="mouseOutImage()">Subcategory One</a></li>
              <li><a href="subcategory3.htm" onmouseover="mouseOverImage3()"
    onmouseout="mouseOutImage()">Subcategory 2</a></li></ul>
</div>
<div>
              <img id="catPic" src="images/defaultpic1.jpg" width="280" height="420" alt="">
            </div>
</body>
</html>

【问题讨论】：

标签： javascript image src onmouseover onmouseout

【解决方案1】：

你可以在 mousein 中隐藏默认图像源，然后在 mouseout 中恢复它

<script type="text/javascript">
function mouseOverImage2()
{
    if(typeof(document.getElementById("catPic").defaultSrc) == "undefined")
        document.getElementById("catPic").defaultSrc = document.getElementById("catPic").src;
    document.getElementById("catPic").src='images/defaultpic2.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='420px';;
}  
function mouseOverImage3()
{
    if(typeof(document.getElementById("catPic").defaultSrc) == "undefined")
        document.getElementById("catPic").defaultSrc = document.getElementById("catPic").src;
    document.getElementById("catPic").src='images/defaultpic3.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='266px';;
}
function mouseOutImage(e)
{
    if(typeof(document.getElementById("catPic").defaultSrc) != "undefined")
        document.getElementById("catPic").src= document.getElementById("catPic").defaultSrc;
}
</script>

【讨论】：

谢谢，但这个不采用原始图像尺寸，当 onmouseout 时，默认图像会缩小或放大到被 onmouseover 替换的大小。

【解决方案2】：

您需要将旧图像 src 存储在临时变量或某处的元素中，例如，使用全局：

var originalImage;
function mouseOverImage2()
{
    originalImage = document.getElementById("catPic").src; 
    ...

然后鼠标退出就恢复：

document.getElementById("catPic").src=originalImage;

编辑

您可以以几乎相同的方式缓存其他属性（高度、宽度）。需要注意的一件事是不要将老式的 html height 和 width 属性与样式高度和宽度混合 - 这会导致混淆。

我已经更新了 Fiddle here

【讨论】：

我真的很喜欢这种方法，但要让它工作，我需要删除所有宽度和高度值，否则如果悬停图像不同，（恢复的）默认图像将显示缩小或放大。有没有办法让代码中的宽度和高度值仍然存在？我关心要验证的站点没有这些参数将导致无效页面。非常感谢您的帮助！
@user1844914 - 我已经更新了小提琴以保持宽度 + 高度 - 请注意使用 css 样式宽度 + 高度，而不是旧的 html 属性。

【解决方案3】：

除了上述之外，从长远来看，只使用一个函数并将元素 no 作为参数传递可能会更容易。沿着这条线

<html>
    <head>
    <script type="text/javascript">
        function mouseOverImage(elementNo){
document.getElementById("catPic").src='images/defaultpic'+elementNo+'.jpg';document.images['catPic'].style.width='280px';     document.images['catPic'].style.height='420px';;
    }  

    function mouseOutImage(elementNo){
        document.getElementById("catPic").src='images/defaultpic'+elementNo+'.jpg'; //here's what I don't know what to put
    }
</script>
</head>
<body>
<div class="nav">
          <ul>
              <li><a href="subcategory2.htm" onmouseover="mouseOverImage(2)"
onmouseout="mouseOutImage(1)">Subcategory One</a></li>
              <li><a href="subcategory3.htm" onmouseover="mouseOverImage(3)"
onmouseout="mouseOutImage(1)">Subcategory 2</a></li></ul>
</div>
<div>
       <img id="catPic" src="images/defaultpic1.jpg" width="280" height="420" alt="">
        </div>

 </body>
 </html>

【讨论】：

感谢您的帮助，但我的图片尺寸不同，对我来说效果不佳。
mouseOverImage(elementNo, imgWidth, imgHeight){ 从长远来看，它将使您的代码更加清晰和可维护
它看起来很干净，但我想我太笨了，无法根据自己的需要进行修改。如果我的图片没有命名为 defaultpic1.jpg、defaultpic2.jpg 但它们就像定价.jpg、contact.jpg 等，并且它们具有不同的高度值怎么办？那么代码应该是什么样的呢？我相信你的方法看起来不错，如果图像被命名为相似，只是数字改变，但如果不是，有可能吗？

【解决方案4】：

我会隐藏 data-* 属性中的所有值，因此我可以重复使用相同的函数。例如，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Cats</title>
        <script type="text/javascript">
function mouseOverImage(elm) {
    var img = document.getElementById("catPic");
    img.src = elm.getAttribute('data-cat-image');
    img.style.width = elm.getAttribute('data-cat-width');
    img.style.height = elm.getAttribute('data-cat-height');
}
function mouseOutImage() {
    var img = document.getElementById("catPic");
    img.src = img.getAttribute('data-default-image');
    img.style.width = img.getAttribute('data-default-width');
    img.style.height = img.getAttribute('data-default-height');
}
        </script>
    </head>
    <body>
        <div class="nav">
            <ul>
                <li><a href="subcategory2.htm"
                       data-cat-image="images/defaultpic2.jpg" data-cat-width="280px" data-cat-height="420px"
                       onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage()"
                      >Subcategory One</a></li>
                <li><a href="subcategory3.htm"
                       data-cat-image="images/defaultpic3.jpg" data-cat-width="280px" data-cat-height="226px"
                       onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage()"
                      >Subcategory 2</a></li>
            </ul>
        </div>
        <div>
            <img id="catPic" src="images/defaultpic1.jpg" alt=""
                 data-default-image="images/defaultpic1.jpg" data-default-width="280px" data-default-height="420px"
                 width="280" height="420"
                />
        </div>
    </body>
</html>

您还应该考虑在 JavaScript 中附加侦听器，而不是使用 on* 属性，因为这意味着您可以将 JavaScript 与 HTML 完全分开。

【讨论】：

非常感谢，这看起来真的很有趣，而且效果很好！我不知道你对听众是什么意思，因为我的程序员真的很糟糕，但我感谢你的帮助。
您可以阅读有关事件侦听器here 的信息。如果您之前没有遇到过它们，您可能会发现它们非常有趣，因为您可以为同一事件设置多个侦听器，等等 :)