JavaScript 操作图片

1. 使用几个图片的翻转

下面是一种最简单、没有使用任何缓存机制的方法：

    <script type="text/javascript">
        function rollover(img, url) {
            document.images[img].src = url;
        }
    </script>

THML的代码如下所示：

    <a href="contact.html" onmouseover="rollover('contact','but_contact_on.gif')" onmouseout="rollover('contact','but_contact.gif')">
        <img src="but_contact.gif" name="contact" width="103" height="28" alt="Contact Us"
            border="0" />
    </a>

这段代码没有使用缓存机制，默认显示but_contact.gif，onmouseover事件发生时，会加载but_contact_on.gif并显示，如果图片比较大，用户可能就看不到这个图片了。所以，如果要在网页中动态使用图片来实现翻转或者幻灯片效果，需要把已加装过的图片放到浏览器的缓冲区中以给访问者一种平滑流畅的体验。这不是个好办法。Daniel Nolan提出了另外一种方法：

    <script type="text/javascript">
    /*a new object ro is initialized, with following properties*/
        ro = {
            rollClass: 'roll',
            overSrcAddOn: '_on',
            preLoads: [],                   // preLoads is an emptry array;
            init: function () {             // init is a fuction 
                var oversrc;
                var imgs = document.images;
                for (var i = 0; i < imgs.length; i++) {
                    if (!DOMhelp.cssjs('check', imgs[i], ro.rollClass)) { continue; }       // check wether the img element supports roll class: if not continue
                    oversrc = imgs[i].src.toString().replace('.', ro.overSrcAddOn + '.');   //, if yes get the src property value of the img element;
                    ro.preLoads[i] = new Image();                                           // create a new Image to preload the image file;
                    ro.preLoads[i].src = oversrc;
                    DOMhelp.addEvent(imgs[i], 'mouseover', ro.roll, false);                 //register event handler for these img element;
                    DOMhelp.addEvent(imgs[i], 'mouseout', ro.roll, false);
                }
            },
            roll: function (e) {            // roll is also a function
                var t = DOMhelp.getTarget(e);
                var s = t.src;
                var s = s.replace(/.*\//g, '');
                if (e.type == 'mouseover') {
                    t.src = s.replace('.', ro.overSrcAddOn + '.');                          // if it is mouseover event, use the xxx_on.gif ;
                }
                if (e.type == 'mouseout') {
                    t.src = s.replace(ro.overSrcAddOn + '.', '.');                          // if it is mouseout event, use the xxx.gif;
                }
            }
        }
        DOMhelp.addEvent(window, 'load', ro.init, false);                                   // when window.load event happens, call ro.init function;
    </script>

这两种是使用多个图片来实现翻转效果的。下面介绍其他的方法。 

2. 使用一张图片的翻转

CSS的:hover 伪类是很有用的，使用background-position属性改变图片的位置，那么当mouseover时显示图片的左半部分，mouseout时显示图片的右半部分，就可以实现翻转效果了。下面是CSS代码：

    <style type="text/css">
        body{
            font-family:arial,sans-serif;
            font-size:.9em;
        }
        p img{
            vertical-align:bottom;
        }
        h1{
            font-size:1.2em;
        }
        #nav,#nav *{
            margin:0;
            padding:0;
            list-style:none;
        }

        #nav a{
            display:block;
            text-align:center;
            text-transform:uppercase;
            text-decoration:none;
            color:#000;
            width:103px;                /*constrain the width of the <a> element, otherwise all image will show up*/
            padding-top:6px;
            height:22px;
            background:url(doublebutton.gif) top left no-repeat #ccc;
        }
        #nav a:hover{
            background-position:-103px 0;
        }
    </style>

3. 父元素的翻转

    <script type="text/javascript">
        pr = {
            navId: 'nav',
            navHeight: 50,                                              // the height of each row;
            currentLink: 'current',
            init: function () {
                if (!document.getElementById || !document.createTextNode) { return; }
                pr.nav = document.getElementById(pr.navId);
                if (!pr.nav) { return; }
                var lis = document.getElementsByTagName('li');              //get all <li> element
                for (var i = 0; i < lis.length; i++) {
                    if (lis[i].getElementsByTagName('strong').length > 0 || DOMhelp.cssjs('check', lis[i], pr.currentLink)) {
                        pr.current = i;
                    }
                    lis[i].index = i;                                       // get the index for the specified <li> element
                    DOMhelp.addEvent(lis[i], 'mouseover', pr.roll, false);
                    DOMhelp.addEvent(lis[i], 'mouseout', pr.roll, false);
                }
            },
            roll: function (e) {
                var pos;
                var t = DOMhelp.getTarget(e);
                while (t.nodeName.toLowerCase() != 'li' && t.nodeName.toLowerCase() != 'body') {
                    t = t.parentNode;
                }
                pos = e.type == 'mouseover' ? t.index : pr.current;
                pos = pos * pr.navHeight;                                  // based on the event target, calculate the position of the image;
                pr.nav.style.backgroundPosition = '0 -' + pos + 'px';      // set the background position;
            }
        }
        DOMhelp.addEvent(window, 'load', pr.init, false);
    </script>