为什么我的简单 javascript 翻转工作不起作用？

Question

大家好，我有一个简单的鼠标悬停效果，我尝试了几个脚本，但都不起作用，谁能告诉我为什么？`

javascript：

<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
    homebuttonup = new Image();
    homebuttonup.src = "./images/gym-light.png";
    homebuttondown = new Image();
    homebuttondown.src = "./images/buttonright.png";
}

function buttondown(buttonname) {
    if (document.images) {
        document[buttonname].src = eval(buttonname + "down.src");
    }
}

function buttonup(buttonname) {
    if (document.images) {
        document[buttonname].src = eval(buttonname + "up.src");
    }
}
// -->
</script>

和链接：

    <a href="index.html" onmouseover="buttondown('homebutton')"       onmouseout="buttonup('homebutton')">
  <img id='Img4Inner' name="homebutton" src='./images/gym-light.png' alt="" />

  </a>

Answer 1

**更新 2（最后一个大声笑）** 你目前在 a 标签上有 onmouseout 和 onmouseover，将它们移动到 image 标签，它会工作：

你是代码：

<a onmouseout="buttonup('homebutton')" onmouseover="buttondown('homebutton')"        
href="http://www.[...].com" style="height:120px;width:100px;">
<img id="Img4Inner" alt="" src="http://[..].com/images/gym-light.png" name="homebutton">
</a>

工作代码：

<a onmouseout="buttonup('homebutton')" onmouseover="buttondown('homebutton')"        
href="http://www.[...].com" style="height:120px;width:100px;">
 <img alt="" src="http://[...]/images/gym-light.png"  onmouseout="buttonup(this)" 
     onmouseover="buttondown(this)" name="homebutton" id="Img4Inner">
</a>

更新：因为您正在调用锚标记上的函数，它们需要具有类似于以下的高度和宽度（相应地放置您的高度和宽度）：

<a style="height:25px;width:25px;" href="http://www.[...].com" 
onmouseover="buttondown('homebutton')" onmouseout="buttonup('homebutton')">
...
</a>

我出去了……

我刚刚使用了萤火虫，用高度和宽度编辑了 HTML，效果很好：

)

虽然我确信这会解决问题.. doctype 设置为 并且应该类似于这里的内容 (LINK)

如果您实施了以下方法，则图像将具有高度和宽度，并且由于这是要定位的图像，因此可能更有意义..

http://jsfiddle.net/ETHaM/2/

if (document.images) {
    homebuttonup = new Image();
    homebuttonup.src = "http://www.placekitten.com/100/100/";
    homebuttondown = new Image();
    homebuttondown.src = "http://dummyimage.com/100x100/000/fff";
}

function buttondown(obj) {
    if (document.images) {
        obj.src = eval(obj.name+ "down.src");
    }
}

function buttonup(obj) {
    if (document.images) {
        obj.src = eval(obj.name + "up.src");
    }
}


<a href="index.html">
<img id='Img4Inner' onmouseover="buttondown(this)" onmouseout="buttonup(this)" name="homebutton" src='http://www.placekitten.com/100/100/' alt="" />
</a>

Answer 2

您的代码有效

这里有一个更不显眼的版本

http://jsfiddle.net/mplungjan/927nN/

<a href="index.html" id="homeLink"><img
 id='Img4Inner' class="hoverImg"
 name="homebutton" src='http://www.placekitten.com/100/100/' alt="" /></a>
 <a href="about.html" id="aboutLink"><img
 id='Img5Inner' class="hoverImg"
 name="aboutbutton" src='http://www.placekitten.com/100/100/' alt="" /></a>

var buttons={};
if (document.images) {
    buttons["homebuttonup"] = new Image();
    buttons["homebuttonup"].src = "http://www.placekitten.com/100/100/";
    buttons["homebuttondown"] = new Image();
    buttons["homebuttondown"].src = "http://dummyimage.com/100x100/000/fff";
    buttons["aboutbuttonup"] = new Image();
    buttons["aboutbuttonup"].src = "http://www.placekitten.com/100/100/";
    buttons["aboutbuttondown"] = new Image();
    buttons["aboutbuttondown"].src = "http://dummyimage.com/100x100/000/fff";
}

window.onload=function() {
    var images = document.getElementsByTagName("img");
    for (var i=0,n=images.length;i<n;i++) {
        if (images[i].className=="hoverImg") {
            images[i].parentNode.onmouseover=function() {
              var buttonname=this.id.replace("Link","button");
              document[buttonname].src = buttons[buttonname + "down"].src;
            }
            images[i].parentNode.onmouseout=function() {
              var buttonname=this.id.replace("Link","button");
              document[buttonname].src = buttons[buttonname + "up"].src;
            }
        }
    }   
}