郭涛 (08/17/2000)

　　为了使主页更有动感，有一些朋友在主页中加入了能够响应鼠标onmouseover等事件的动态按扭。费了半天劲做好的按扭虽然在本地（自己的计算机）的浏览器里感觉效果很不错，但传到网上一看满不是那么回事。本来鼠标挪到按扭上应该产生变化了，但等了半天那张图片才出现，想一想其它的浏览者，谁会把鼠标停在按扭上等着看你那张按扭图片出现呢。那不是费力不讨好吗，可这种效果确实很吸引人所以又不想放弃，那怎么办？我来告诉你。

　　首先我们要明白这种按扭的效果是怎么产生的，让我们先看一个简单的例子。

　　＜a href=garget.html onmouseover="document.images［'imagename'］.src='image_over.gif';"

　　onmouseout="document.images［'imagename'］.src='image.gif';"＞

　　＜img src=image.gif name=imagename＞＜/a＞

　　我们可以看到当浏览器接收到onmouseover事件后将在浏览器上找“image_over.gif"并下载，这个过程是需要时间的。但是我们需要的是变化在一瞬间立即发生，那么我们就需要浏览器提前把“image_over.gif"下载到本地，这就是我说的“预先下载”（preloading）。下面我就用三种不同的方法来实现它。

　　一． 种方法很简单，你所要做的就是在页面的底部（最不起眼的地方）放上你希望预先下载的图片。不过图片需要以一个象素的大小出现，这样几乎没人能注意到。代码如下。

　　＜IMG SRC=“image1.gif" height=1 width=1 border=0＞

　　＜IMG SRC=“image2.gif" height=1 width=1 border=0＞

　　＜IMG SRC=“image3.gif" height=1 width=1 border=0＞

　　＜IMG SRC=“image4.gif" height=1 width=1 border=0＞

　　＜IMG SRC=“image5.gif" height=1 width=1 border=0＞

　　但是如果你的背静色和图象的颜色反差很大的话，图象就会被别人看出来了，反正不是很美观。那么看看下一种吧。

　　二． 这种方法要比上一种好一些，图片通过javascript语言被预先调到内存，速度很快。代码里还加入了浏览器的探测，如果你的浏览器不支持onmouseover那么就不做下载。代码如下。

　　＜Script language=“javascript"＞

　　browser_name = navigator.appName;

　　browser_version = parseFloat(navigator.appVersion);

　　if (browser_name == “Netscape" ＆＆ browser_version >= 3.0)

　　{

　　roll =‘true';

　　}

　　else if (browser_name == “Microsoft Internet Explorer" ＆＆ browser_version >= 4.0)

　　{

　　roll =‘true';

　　}

　　else

　　{

　　roll =‘false';

　　}

　　if (roll == 'true')

　　{

　　＜!－－这就是你要预下载的图片

　　var imglist = new Array (

　　“iface/a_aaa.gif",

　　“iface/a_bvt.gif",

　　“iface/a_email.gif",

　　“iface/a_fimages.gif",

　　“iface/a_links.gif",

　　“iface/a_misc.gif"

　　);

　　var imgs = new Array();

　　var count;

　　if (document.images)

　　{

　　for (count=0; count
　　{

　　imgs［count］=new Image(); imgs［count］.src=imglist［count］;

　　}

　　}

　　// －－>

　　＜/script＞

　　三． 这种方法看起来更清楚，速度最快，效果也最好。它把原图和onmouseover的图片一起下载到本地。这样，错后的现象就不可能发生了。代码如下。

　　＜script＞

　　lt;!－－ Image Preload Script

　　if (document.images)

　　{

　　image1on = new Image(); image1on.src =“images/b_home2.gif";

　　image2on = new Image(); image2on.src = “images/b_req2.gif";

　　image3on = new Image(); image3on.src = “images/b_office2.gif";

　　image4on = new Image(); image4on.src = “images/b_about2.gif";

　　image1off = new Image(); image1off.src = “images/b_home1.gif";

　　image2off = new Image(); image2off.src = “images/b_req1.gif";

　　image3off = new Image(); image3off.src = “images/b_office1.gif";

　　image4off = new Image(); image4off.src = “images/b_about1.gif";

　　}

　　function turnOn(imageName)

　　{

　　if (document.images)

　　{

　　document［imageName］.src = eval(imageName ＋ “on.src");

　　}

　　}

　　function turnOff(imageName)

　　{

　　if (document.images)

　　{

　　document［imageName］.src = eval(imageName ＋“off.src");

　　}

　　}

　　＜/script＞

　　然后把按扭处的代码改一下。

　　＜a href=“home.htm" onMouseOver=“turnOn(‘image1')" onMouseOut=“turnoff(‘image1')">

　　＜img name=“image1" src=“images/b_home1.gif" alt=“Home" width=145 height=35 border=0>

　　三种方法都说完了，还是先实践一下再决定选择哪种吧。

无缺在上个帖子中说

引用:

---

加一句：上面的代码注意一下全角和半角符号，比如<>和" ".

---

是啊是啊（汗~~~~）