如何让正确的过渡按钮与预载图片

来源：互联网发布：专有网络 ftp 编辑：程序博客网时间：2024/05/01 05:10

展期（鼠标悬停）是一个最简单的，并在同一时间在网络页面的最流行的脚本。不过，在90％的情况下，这个简单的脚本是由不正确。事实！

我们首先需要了解这个脚本应该如何工作。乍一看，它看起来很基本的：每当用户（一张图片更换为其它）将鼠标指针移到按钮上移动时，按钮会变成自己的状态。

它应该会立即出现，但往往不显示。为什么呢？事实是，第二个（活动）图片下载，只有当用户将鼠标指针移到按钮上移动。即使用户有高速互联网连接 - 它会带走一些时间的。画面的多个大小 - 越延迟。

不正确的翻转按钮示例

当您将鼠标指针移到按钮上，第一次你可能会看到一个小的滞后：

预载图像

你需要尽快使用该脚本加载图片。此代码插入您的<head> </ head>标记之间。编辑该脚本（见注释）。

 <script type="text/javascript"> <!-- if(document.images) { var image_array = new Array(); // path to the directory with images var path = '/img/'; // enumeration of the "active" images image_array[0] = path + "button1_red.gif"; image_array[1] = path + "button2_red.gif"; image_array[2] = path + "button3_red.gif"; var preload_image = new Array (); for(var i=0; i<image_array.length; i++) { preload_image[i]= new Image(); preload_image[i].src = image_array[i]; } } //--> </script>

被加载的图像后 - 我们用通常的过渡按钮的HTML代码。

HTML程式码

 <a href="#" onmouseover="rollover('button1','button1_red.gif')" onmouseout="rollover('button1','button1_blue.gif')"><img src="/img/button1_blue.gif" name="button1" width="109" height="25" border="0"></a> <a href="#" onmouseover="rollover('button2','button2_red.gif')" onmouseout="rollover('button2','button2_blue.gif')"><img src="/img/button2_blue.gif" name="button2" width="109" height="25" border="0"></a> <a href="#" onmouseover="rollover('button3','button3_red.gif')" onmouseout="rollover('button3','button3_blue.gif')"><img src="/img/button3_blue.gif" name="button3" width="109" height="25" border="0"></a>

在onmouseover和 onmouseout事件处理程序是用来执行指定的Javascript代码，每当用户通过一个按钮，移动鼠标或按钮迁出。

翻转功能

此代码插入到你的HTML的任何地方，但在此之前的按钮的HTML代码：

 <script type="text/javascript"> <!-- function rollover(name, filename) { var fullpath = '/img/' + filename; document.images[name].src = fullpath; } //--> </script>

正确的样品

注：设置FULLPATH变量=“”如果放在同一个目录下的html文件中的图像。