Javascript 第六章-优快云博客

本文介绍了一种使用HTML、CSS和JavaScript实现的图片快照与画廊展示方法，通过链接图片并添加点击事件，用户可以轻松查看和选择图片。

<html>
 <head>
     <meta charset=utf-8>   
     <title></title>
 </head>
 <body>
 <h1>Snapshots</h1>
 <ul>
     <li><a href="images/1 (1).png" title="picture1" alt="picture1">picture1</a></li>
     <li><a href="images/1 (2).png" title="picture2" alt="picture2">picture2</a></li>
     <li><a href="images/1 (3).png" title="picture3" alt="picture3">picture3</a></li>
 </ul>
 
 <img src="images/placeholder.png" alt="my image gallery" id="placeholder">
 <p id="description">Choose an image</p>
 
 
 <script>

 function addLoadEvent(func){
        var oldonload = window.onload;
        if (typeof oldonload != 'function') {
            window.onload = func;
        }else{
            window.onload = function(){
                oldonload();
                func();
            }
        }
    }


 function prepareGallery(){    
     if (!document.getElementsByTagName || !document.getElementById) return false;    
     links = document.getElementsByTagName("a");
     for (var i = 0,j = links.length;i<j; i++) {
         links[i].onclick = function(){
return !showPic(this);
         }
     }
 }
 
     function showPic(whichPic){
         if (!document.getElementById("placeholder")) return false;
         var source = whichPic.getAttribute("href");
         var placeholder = document.getElementById("placeholder");
         if (placeholder.nodeName != "IMG") return false;
         placeholder.setAttribute("src",source);
 
         if (document.getElementById("description")) {
             var text = whichPic.getAttribute("title");
             var description = document.getElementById("description");
             if (description.firstChild.nodeType == 3) {
                 description.firstChild.nodeValue = text;
             }
     }

     return true;
     }


     addLoadEvent(prepareGallery);

     
 </script>
 </body>
 
 </html>