此代码有什么问题？

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

正如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，并且可能与大多数浏览器兼容-尽管我很想在每个元素上添加标题标题，以帮助解决屏幕阅读器和可访问性问题。

Answer 4

正如nickf正确指出的，您需要将传递给函数的字符串括在引号中。

您还可以通过传入图像的ID来简化手动字符串：

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

您可以更进一步，并使用生成的Event对象，从而无需对“ over”和“ out”部分进行硬编码。 （哦，看看Switch语句可以摆脱if {} elseif {} else {}阻止的那种令人讨厌的混乱情况）

第三种选择是，如果您要做的只是设置悬停/输出图像，则可以使用CSS完成所有这些操作。

Answer 5

除了@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之类的库，则可以进一步简化代码。