這段代碼有什麼問題？

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每個元素，以幫助屏幕閱讀器和可訪問性問題。