1

我有一个页面，其中菜单按钮（图像）是白色的，但我希望它们在悬停时变为红色并在鼠标输出时返回白色。所以我有相应的红色菜单按钮。所以如果白色按钮是motors1.jpg，红色按钮是motors2.jpg，因此下面的JQuery代码是算法。

<table>
<tr>
<td><img class="navimg" src="images/home1.gif"/></td>
<td><img class="navimg" src="images/motors1.gif"/></td>
<td><img class="navimg" src="images/about_us1.gif"/></td>
<td><img class="navimg" src="images/media1.gif"/></td>
<td><img class="navimg" src="images/forums1.gif"/></td>
<td><img class="navimg" src="images/dealers1.gif"/></td>
<td><img class="navimg" src="images/whats_new1.gif"/></td>

</tr>
</table>

Jquery 代码是：

$(document).ready(function(){
   $('.navimg').mouseover(function(){
    source=$(this).attr('src').replace('1','2');
    $(this).attr('src',source);

   }).mouseout(function(){
    source= source.replace('2','1');
    $(this).attr('src',source);
   });

});

我使用外部 CSS 样式表进行定位

                          .navimg{
                         width: 125.5px;
                         height: 34px;
                                  }

所以问题是：我注意到第一次加载页面时白色按钮变为红色按钮时存在延迟。我认为滞后是因为红色按钮未在页面加载时加载（因此不在浏览器缓存中），因此 jquery 代码重新加载它们。因此，通过将它们加载为隐藏输入、将它们加载到浏览器缓存来解决此问题的任何方法都将受到赞赏或任何其他解决此问题的方法。

4

3 回答 3

2

只需使用图像精灵源

对于一个菜单按钮，您将拥有一个包含白色和红色图像的图像文件，因此您只需要更改background-position悬停动作。它非常快，图像加载完全，你不需要使用一些 javascripts，只需要 CSS 。

于 2012-06-08T11:07:14.510 回答
2

使用精灵是最好的解决方案。

但是，如果您无法做到这一点，则可以使用以下 JavaScript 方法（取自 Dreamweaver）预加载图像。

在您的 html 标记之后添加以下内容。

<script type="text/JavaScript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>

将以下属性添加到您的 body 标签：

onload="MM_preloadImages('path of image goes here')"
于 2012-06-08T11:17:19.127 回答
1

我会通过加入motor1.gif 和motors2.gif 成为motors.gif 来做到这一点。

如果您制作了一张顶部为白色图像，底部为红色图像的图像，那么您的mouseover/mouseout（ps. check out hover）只需要更改图像偏移量，无需预加载。

于 2012-06-08T11:04:36.553 回答