javascript - HTML/JS 导航栏

Question

我目前正在一个网站上工作，我遇到了一个问题，我不确定问题是我的图像还是 html/JS 代码。

我正在制作一个包含 7 个图像的导航菜单，这些图像将具有翻转效果并更改为另一个图像。

这是我的第一张图片的代码。

<div id="nav-menu">
 <a href="Culture.html" onmouseover="culture-nav.src='images/nav/over_culture.gif';"onmouseout="culture-nav.src='images/nav/norm_culture.gif';">
  <img border="0" src='images/nav/norm_culture.gif' alt="Culture-nav-button";name="culture_nav"/>
 </a>
</div>

当我在 PS 中创建图像时，我也使用了切片，并为网络设备和 png-24 保存。然而，两个外部图像是 png，内部 5 是 gif。这是问题所在，还是我的代码，我该如何解决？

参考：over_culture.gif(onmouseover) norm_culture.gif(hover/onmouseout)

Answer 1

这只能使用 css 完成，如下所示：（根据您的图像大小更改宽度和高度）

<style>
#nav-menu a{display:block;}
a.culture {width:100px;height:100px; background: url(/images/nav/norm_culture.gif) no-repeat 0 0 }
a.culture:hover{background: url(/images/nav/over_culture.gif) no-repeat 0 0}
</style>
<div id="nav-menu"> 
 <a href="Culture.html" class="culture">Culture</a> 
</div>