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中创建图像时，我也使用了切片，并保存用于web设备和png-24。然而，两个外部图像是png，内部5是gif。这是问题，还是我的代码，我该如何解决？

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

HTML / JS导航栏

1 个答案: