Javascript HTML/JS导航栏

我目前正在一个网站上工作，我遇到了一个问题，我不确定问题是出在我的图片还是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中创建图像时，我也使用了该切片，并保存用于web设备和png-24。但是，外部的两个图像是png，内部的5个是gif。这就是问题所在，还是我的代码，我该如何解决

---

ref:over_culture.gif（onmouseover）norm_culture.gif（hover/onmouseout）

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

#导航菜单a{显示：块；}
a、 区域性{宽度：100px；高度：100px；背景：url（/images/nav/norm_culture.gif）无重复0}
a、 区域性：悬停{background:url（/images/nav/over_culture.gif）不重复0}

您实际上还没有描述问题吗？我不知道你所说的“外部”和“内部”是什么意思，但在你所问的问题中并没有引用的

png

图像。

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