js实现给导航换背景图片

有些网页上的按钮,往往有两张不同的图片进行轮换,鼠标不动时,显示图片,鼠标移动到图片时候,显示另外一张图片.所以,就要使用下面几个javascript函数.

<script type="text/javascript">

//预先导入图片函数,往往是mouseover时候显示的图片

function MM_swapImgRestore() { //v3.0

var i, x, a = document.MM_sr; for (i = 0; a && i < a.length && (x = a[i]) && x.oSrc; i++) x.src = x.oSrc;

}

//图片还原,当你把鼠标移动到图片,转换为另外一张图片,但是鼠标移开后要还原为原先那张图片.

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]; }

}

}

function MM_findObj(n, d) { //v4.01

var p, i, x; if (!d) d = document; if ((p = n.indexOf("?")) > 0 && parent.frames.length) {

d = parent.frames[n.substring(p + 1)].document; n = n.substring(0, p);

}

if (!(x = d
) && d.all) x = d.all
; for (i = 0; !x && i < d.forms.length; i++) x = d.forms[i]
;

for (i = 0; !x && d.layers && i < d.layers.length; i++) x = MM_findObj(n, d.layers[i].document);

if (!x && d.getElementById) x = d.getElementById(n); return x;

}

//图片转换函数,鼠标移动到图片时候,要进行图片转换

function MM_swapImage() { //v3.0

var i, j = 0, x, a = MM_swapImage.arguments; document.MM_sr = new Array; for (i = 0; i < (a.length - 2); i += 3)

if ((x = MM_findObj(a[i])) != null) { document.MM_sr[j++] = x; if (!x.oSrc) x.oSrc = x.src; x.src = a[i + 2]; }

}

</script>

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/鼠标滑过后显示图片.gif',1)">

<img src="images/正常显示图片.gif" name="about" id="Img1" alt="关于我们" />

</a>

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('software','','images/menu_software2.jpg',1)">

<img src="images/menu_software.gif" name="software" id="Img2" alt="公司产品" />

</a>