这段代码有什么问题？

Question

function menuhover(id,state){ 
    if(id=="home"){ 
     if(state=="over"){ 
      document.getElementById(id).src="pages/styles/images/home1hover.png"; 
     } else if(state=="out"){ 
      document.getElementById(id).src="pages/styles/images/home1.png"; 
     } 
    } else if(id=="news"){ 
     if(state=="over"){ 
      document.getElementById(id).src="pages/styles/images/news2hover.png"; 
     } else if(state=="out"){ 
      document.getElementById(id).src="pages/styles/images/news2.png"; 
     } 
    } else if(id=="register"){ 
     if(state=="over"){ 
      document.getElementById(id).src="pages/styles/images/register3hover.png"; 
     } else if(state=="out"){ 
      document.getElementById(id).src="pages/styles/images/register3.png"; 
     } 
    } else if(id=="contrib"){ 
     if(state=="over"){ 
      document.getElementById(id).src="pages/styles/images/contributor4hover.png"; 
     } else if(state=="out"){ 
      document.getElementById(id).src="pages/styles/images/contributor4.png"; 
     } 
    } else if(id=="login"){ 
     if(state=="over"){ 
      document.getElementById(id).src="pages/styles/images/login5hover.png"; 
     } else if(state=="out"){ 
      document.getElementById(id).src="pages/styles/images/login5.png"; 
     } 
    } 
}

它在

<div class="menu"> 
    <img class="banner" src="pages/styles/images/banner.png" border="0"/> 
    <p class="link"><a href="http://www.realmsofruin.co.cc"><img id="home" src="pages/styles/images/home1.png" border="0" onmouseover="menuhover(home,over)" onmouseout="menuhover(home,out)"/></a></p> 
    <p class="link"><a href=""><img id="news" src="pages/styles/images/news2.png" border="0" onmouseover="menuhover(news,over)" onmouseout="menuhover(news,out)"/></a></p> 
    <p class="link"><a href=""><img id="register" src="pages/styles/images/register3.png" border="0" onmouseover="menuhover(register,over)" onmouseout="menuhover(register,out)"/></a></p> 
    <p class="link"><a link=""><img id="contrib" src="pages/styles/images/contributor4.png" border="0" onmouseover="menuhover(contrib,over)" onmouseout="menuhover(contrib,out)"/></a></p> 
    <p class="link"><a link=""><img id="login" src="pages/styles/images/login5.png" border="0" onmouseover="menuhover(login,over)" onmouseout="menuhover(login,out)"/></a></p> 
</div> 

引用和错误控制台告诉我这

在没有定义出来没有定义 ..

我应该如何界定呢？ ？

Answer 1

你只需要把你周围的变量报价要传递：

onmouseover="menuhover('home', 'over')" 

没有他们，就在寻找一个可变称为home或over不存在。

Answer 2

它应该是这样的

onmouseover="menuhover('login','over')" 

而不是

onmouseover="menuhover(login,over)" 

即参数来调用需要是字符串的函数...

Answer 3

正如nickf正确地指出，你需要把你传递给你的字符串用引号括起来。

还可以短切通过使在图像的ID手动字符串：

onmouseover="menuhover(this.id, 'over')" 

可以更进一步借此，并使用所产生的事件对象，因此删除需要硬编码'over'和'out'部分。 （哦，并看看Switch语句以摆脱那些讨厌的混乱if {else else {} else {} blocks）

对于第三种选择，如果你只是在设置悬停/出图像，你可以用CSS来完成所有这些。

Answer 4

除了@nickf的正确诊断之外，我想建议您稍微简化代码。

function menuhover(imgElement){ 
    imgElement.src = "pages/styles/images/" + imgElement.id + "hover.png"; 
} 

function menuout(imgElement){ 
    imgElement.src = "pages/styles/images/" + imgElement.id + ".png"; 
} 


<div class="menu"> 
    <img class="banner" src="pages/styles/images/banner.png" border="0"/> 
    <p class="link"><a href="http://www.realmsofruin.co.cc"><img id="home" src="pages/styles/images/home.png" border="0" onmouseover="menuhover(this)" onmouseout="menuout(this)"/></a></p> 
    <p class="link"><a href=""><img id="news" src="pages/styles/images/news.png" border="0" onmouseover="menuhover(this)" onmouseout="menuout(this)"/></a></p> 
    <p class="link"><a href=""><img id="register" src="pages/styles/images/register.png" border="0" onmouseover="menuhover(this)" onmouseout="menuout(this)"/></a></p> 
    <p class="link"><a link=""><img id="contrib" src="pages/styles/images/contrib.png" border="0" onmouseover="menuhover(this)" onmouseout="menuout(this)"/></a></p> 
    <p class="link"><a link=""><img id="login" src="pages/styles/images/login.png" border="0" onmouseover="menuhover(this)" onmouseout="menuout(this)"/></a></p> 
</div> 

事实上，如果你是采用使用诸如jQuery库，你甚至可以进一步简化代码。

Answer 5

正如iAn所示，CSS的智能使用可以消除javascript的整个负载 - 我非常专注于改进您的实现，我没有发现明显的替代方案） 假设您的图像是16乘16，我倒是做这样的事情......

.link a { //defines the size of all <a> elements that appear insie an element with the 'link' class 
    width: 16px; 
    height 16px; 
    background-repeat: norepeat; 
    background-position: 0px, 0px; 
} 

a.home{ //defines the appearance of the 'home' link, when the cursor is NOT over it 
    background-image: url("pages/styles/images/home.png"); 
} 

a.home:hover{ //defines the appearance of the 'home' link, when the cursor is hovering over it 
    background-image: url("pages/styles/images/homehover.png"); 
} 

a.news{ 
    background-image: url("pages/styles/images/news.png"); 
} 

a.news:hover{ 
    background-image: url("pages/styles/images/newshover.png"); 
} 

a.register{ 
    background-image: url("pages/styles/images/register.png"); 
} 

a.register:hover{ 
    background-image: url("pages/styles/images/registerhover.png"); 
} 

a.contrib{ 
    background-image: url("pages/styles/images/contrib.png"); 
} 

a.contrib:hover{ 
    background-image: url("pages/styles/images/contribhover.png"); 
} 


<div class="menu"> 
<img class="banner" src="pages/styles/images/banner.png" border="0"/> 
<p class="link"><a href="http://www.realmsofruin.co.cc">&#160;</a></p> 
<p class="link"><a href="" class="home">&#160;</a></p> 
<p class="link"><a href="" class="news">&#160;</a></p> 
<p class="link"><a link="" class="register">&#160;</a></p> 
<p class="link"><a link="" class="contrib">&#160;</a></p> 
</div> 

无需JavaScript和可能与大多数浏览器兼容 - 虽然我会很想把标题attrubute每个元素，以帮助屏幕阅读器和可访问性问题。