如何改变图像与在恢复到默认网站上的图像不同地方的onmouseover？(How to change

我在这个没有专家，所以原谅我，如果这是很基本的，但我无法找到答案。

所以我想有在页面左侧导航类部分。每个类别是不同的站点，并且每个站点上有它自己独特的形象。恩。 category1.htm有defaultpic1.jpg，类2.htm有defaultpic2.jpg ....

当我将鼠标悬停在链接到产品组别在导航部分我希望他们能够改变当前站点的默认图像拖欠类别2图像，然后的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>

Answer 1:

我会隐藏所有值数据- *属性，所以我可以重复使用相同的功能。例如，

<!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中的听众，而不是使用的*属性，因为它意味着你可以完全从你的HTML单独您的JavaScript。

Answer 2:

你需要存储在临时变量的旧图片src或元素的地方，例如，使用一个全球性的：

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

然后对小鼠进行还原：

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

编辑

您可以缓存在几乎相同的方式等特性（高度，宽度）。有一点要注意的是不要混合老派的HTML height和width与风格的高度和宽度属性-这将导致混乱。

我已经更新了小提琴这里

Answer 3:

你可以藏掉默认图像源mousein，然后在鼠标移开恢复

<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>

Answer 4:

上述的加成可能在长期更容易只使用一个功能和不通过该元件作为一个参数。沿着这些线路

<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>

文章来源: How to change image with onmouseover in different place that reverts back to default image on the site?