3

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

所以我想在页面左侧有带有类别的导航部分。每个类别都是不同的站点，每个站点都有自己独特的图像。前任。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>
4

4 回答 4

2

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

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

然后在鼠标上恢复它：

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

编辑

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

我在这里更新了小提琴

于 2012-11-22T12:18:04.813 回答
2

我会隐藏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 完全分开。

于 2012-11-22T12:37:37.437 回答
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>
于 2012-11-22T12:15:51.010 回答
1

除了上述之外，从长远来看，只使用一个函数并将元素 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>
于 2012-11-22T12:22:04.197 回答