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>

并且错误控制台告诉我这个

over未定义 out没有定义..

我应该如何定义它们？

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

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这样的库，你可以进一步简化代码。

这段代码有什么问题？

5 个答案: