现在的位置: 首页 > 综合 > 正文

js实现给导航换背景图片

2018年04月09日 ⁄ 综合 ⁄ 共 1671字 ⁄ 字号 评论关闭

有些网页上的按钮,往往有两张不同的图片进行轮换,鼠标不动时,显示图片,鼠标移动到图片时候,显示另外一张图片.所以,就要使用下面几个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[n]) && d.all) x = d.all[n]; for (i = 0; !x && i < d.forms.length; i++) x = d.forms[i][n];
        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>

抱歉!评论已关闭.