이 코드가 무슨 문제입니까?

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> 

에서 참조하는 오류 콘솔은 나에게 밖으로가 정의되어 있지 정의되어 있지 않은 이상이

을 알 수있다? ? 이 변수라는 home 또는 존재하지 않는 over 찾는 것,

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

을 그들없이 :

Answer 1

당신은 당신이 전달하는 당신의 변수 주위에 따옴표를 넣어해야합니다. 정확하게 지적 nickf으로

Answer 2

그것은,

Answer 3

...

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

보다는

리터럴 문자열로 호출해야하는 함수의 매개 변수, 즉

onmouseover="menuhover(login,over)" 

같은이어야한다 당신이 전달하는 문자열을 따옴표로 묶어야합니다.

또한 짧은 컷 이미지의 ID를 전달하여 수동 문자열을 할 수

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

당신은 한 단계 더 이것을 가지고 생성되는 이벤트 객체를 사용, 따라서 필요성을 제거 할 수 있습니다 '오버'및 '아웃'부분을 하드 코딩합니다. (아, switch 문을보고 if {} elseif {} else {} 블록의 불쾌한 엉망을 제거하십시오)

그리고 세 번째 옵션으로는 호버/아웃 이미지 설정 CSS로이 모든 것을 할 수 있습니다.

Answer 4

올바른 진단 @nickf 외에도 코드를 다소 단순화하는 것이 좋습니다. 당신이 도서관과 같은 jQuery의 사용을 채택한다면

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> 

는 사실, 당신은 더욱 코드를 단순화 할 수있다.

Answer 5

iAn이 제안한 것처럼 CSS를 스마트하게 사용하면 자바 스크립트를 완전히 제거 할 수 있습니다. 구현 방법을 개선하는 데 집중했기 때문에 확실한 대안을 찾지 못했습니다. 이미지가 16x16 크기라고 가정하면 '

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

없음 자바 스크립트 필요하지 ... 같은 것을 할, 대부분의 브라우저와 호환 아마 거라고 - 나는 각 요소에 제목 attrubute을 넣어 유혹 할 것입니다 있지만, 화면 판독기 및 접근성 문제에 도움 .