簡単な画像閲覧サイト(画像ジャンプページ表示をクリック)を作成した後、考慮する必要があります:1.リンクをクリックすると、ウィンドウに移動するのではなく、このページに残ってほしいです.　　2.しかし、あるリンクをクリックすると、このページでその画像と元の画像リストを同時に見たいと思っています.

解決策：

　　1.「プレースホルダ」画像を追加することで、このホームページに閲覧領域を予約します.　　2.リンクをクリックすると、このページのデフォルトの動作がブロックされます.　　3.あるリンクをクリックすると、「プレースホルダ」画像をその接続に対応する画像に置き換えます.

Case1：JavaScript_Image Gallery：

　　1.imagesフォルダ:画像2を保存する.scriptsフォルダ:JSファイル3を保存する.stylesフォルダ:CSSファイル4を保存する.gallery.html

コード:

gallery.htmlコード:

    
    
    


    
Snapshots
    

        

            Fireworks
        
        

            Coffee
        
        

            Rose
        
        

            Bigben
        
    
    ![](images/placeholder.jpg)
    
Choose an image.
    

showPic.js

function showPic(whichpic){
//    
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
//    
    var text = whichpic.getAttribute("title");
    var description = document.getElementById("description");
    description.firstChild.nodeValue = text;
}
function countBodyChildren(){
    var body_element = document.getElementsByTagName("body")[0];
        //alert(body_element.childNodes.length);  body           
    alert(body_element.nodeType);//  body         
}
window.onload = countBodyChildren;

layout.css

body {
    font-family: "Helvetica","Arial",serif;
    color: #333;
    background-color: #ccc;
    margin: 1em 10%;
}
h1 {
    color: #333;
    background-color: transparent;
}
a {
    color: #c60;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}
ul {
    padding: 0;
}
li {
    float: left;
    padding: 1em;
    list-style: none;
}
img {
    display: block;
    clear: both;
}

：

　　1.DOMが する を して、ライブラリスクリプトを する .　　2.イベント を してJavaScriptコードをWebページに する .　　3. する があるいくつかの しい :-childNodes-nodeType-nodeValue-firstChild-lastChild

1.placeholder.setAttribute("src",source); <=> placeholder.src = source; 2.イベント の :event=「JavaScript statement(s)」 :JavaScriptコードは のペアに まれます. の のJavaScript をこの の に くことができます. をセミコロンで るだけです.3.thisキーワードは、「このオブジェクト」を すことができ、ここでは「この ”。
4. onclick JavaScript return false ， ：
　　onclick="showPic(this);return false;"
5.childNodes ： ， （ ， 。）
6.windows.onload = countBodyChildren;// countBodyChildren 。
7.nodeType ： ， 。
　　nodeType 12 ： 3 ：
　　- nodeType 1。
　　- nodeType 2。
　　- nodeType 3。
8.nodeValue ： （ ） 。
　　node.nodeValue
　 ：

Choose it

　　 ： nodeValue de ， 。

null。

，

。
　　alert(de.childNodes[0].nodeValue);
9. ， childNodes ， firstChild， ：
　　node.firstChild <=> node.childNodes[0];
　　node.lastChild <=> node.childNodes[node.childNodes.length-1];

」を す.