HTML/JS Nav Bar

本文关键字：Bar Nav JS HTML 更新时间：2024-03-24

我目前正在一个网站上工作，遇到了一个问题，我不确定问题是我的图像还是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。这是问题所在，还是我的代码，我该如何解决？

ref:over_culture.gif（onmouseover）norm_culture.gif（悬停/onmouseout）

这只能用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>