ケーススタディ：
写真を公開する多くの方法は、すべての画像が直接、ページがロードされますページ上の統一が、これは非常に遅くすることができ、があります。我々はまた、ウェブページとしてピクチャ毎に設計することができます遅いロードの問題はありませんが、これは設計者にとって面倒で、今回はフォトギャラリーを作成することを検討することができます
全体のギャラリーを閲覧するリンクが集中しましたユーザーが彼へのリンクを送信するためにホームページへのリンクをクリックするだけでホームページの際ギャラリー、：
設計要件：
1セットHTMLとCSSスタイル
のウェブページ上の2.フォトギャラリー
3. [リンクの後ウェブページの画像の置き換えではなく、ジャンプページ
テキスト置換を伴う画像下のリンクをクリック4.
HTML構造
デザインのHML一部では非常に簡単です、我々は次のようにテキスト表示は、レイアウトすることができ、画像、ハイパーリンクを頼むことができます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Photo Gallery</title>
<link rel="stylesheet" type="text/css" href="photo gallery.css">
<script src="photo gallery.js"></script>
</head>
<body>
<h1>Photo Gallery</h1>
<ul>
<li><a href="images/1.png" onclick="showPic(this);return false;" title="基普乔格1">基普乔格1</a></li>
<li><a href="images/2.png" onclick="showPic(this);return false;" title="基普乔格2">基普乔格2</a></li>
<li><a href="images/3.png" onclick="showPic(this);return false;" title="基普乔格3">基普乔格3</a></li>
<li><a href="images/4.png" onclick="showPic(this);return false;" title="贝克勒1">贝克勒1</a></li>
<li><a href="images/5.png" onclick="showPic(this);return false;" title="贝克勒2">贝克勒2</a></li>
<li><a href="images/6.png" onclick="showPic(this);return false;" title="贝克勒3">贝克勒3</a></li>
</ul>
<div id="box">
<img id="placeholder" src="images/7.png" height="300" width="400" alt="my image gallery"/>
<p id="description">Choose a image</p>
</div>
</body>
</html>
次のように、この時間枠は次のとおりです。
CSSスタイル
ハイパーリンクを排除するために、横方向と識別子リストとの間に配置された：
セットのLiはフローティングのまま、リストスタイルのタイプはどれもありません識別子ではありません。
li{
float: left;
padding: 1em;
list-style-type: none;
}
a{
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration:none;
}
ここでは、すべてのCSSスタイルです。
body{
font-family: "Helvetica","Arial",serif;
color:#C0C0C0 ;
background-color:#483D8B;
margin: 1em 10%;
}
#box{
width: 400px;
height: 300px;
border:1px solid #8A2BE2;
margin: 8em 8px;
}
a{
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration:none;
}
ul{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style-type: none;
}
img{
display: block;
clear: both;
}
p{
color:#C0C0C0 ;
}
CSSの後にセット効果：
JSの一部 - DOM操作
HTMLとCSSの部分を設定した後、問題は、むしろジャンプページよりリンクをクリックした後、そのページ上のイメージを置き換えるテキストと一緒に交換する画像下のリンクをクリックし、任意のコースを解決されません。その後、我々はこれらの二つの部分を達成するために一緒に動作します。
写真は交換したいWebページのリンクをクリックした後、（1）
どのように達成するために？DOM操作は、クリックごとに、onclickのこの情報ノード要素を取得し、我々はこののhref属性の値を取得し、これを処理する必要があり、その後、プロパティ値のIMG属性表示領域にカバレッジを追加します。
呼び出しを容易にするために、我々はコードより簡潔なの可読性を高めるため、このプロセスは、関数の中で処理される機能を設定与えます。
function showPic(element){
var source=element.getAttribute("href");//获取元素节点的src属性值
var placeholder=document.getElementById("placeholder");//查找placeholder元素
placeholder.setAttribute("src",source);//设置placeholder的src属性值为
}
この時間は、あなたが正常に表示領域に属性を追加することができますが、ページはまだ、イベントハンドラを使用するには、この時間をジャンプします。
| 機能 | 説明 |
|---|---|
| onmouseover属性 | とき要素トリガーの上にマウスホバー |
| ONMOUSEOUT | マウスは、トリガーの要素を離れるとき |
| onclickの | マウスのトリガー要素をクリックすると、 |
私たちは、onclickの機能がクリックされた要素を信じないであろう、この時間は、クリックの効果を得ることができ、onclickの偽以内に返します。
<a href="images/1.png" onclick="showPic(this);return false;"
title="基普乔格1">基普乔格1</a>
（2）あなたは、リンクをクリックしたい画像の下にテキストを置き換えます
テキスト属性の変更を達成し、（1）は、ハイパーリンクのプロパティ値にタイトルを取得するために、操作と実質的に同様であるし、テキストを使用するタグの間element.innerHTMLを変更することができます。
function showPic(element){
var description=document.getElementById("description");//获取元素节点description
var text=element.getAttribute("title");//获取element的title属性值
description.innerHTML=text;//对description的文本内容进行修改
}
：このようにテキスト、方法のさらに変更されたバージョンの導入変更の目的を達成するために
書かれたテキストの別の部分の機能を：
function showPic(element){
var text=element.getAttribute("title");
description.firstChild.nodeValue=text;
}
コード概要：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Photo Gallery</title>
<link rel="stylesheet" type="text/css" href="photo gallery.css">
<script src="photo gallery.js"></script>
</head>
<body>
<h1>Photo Gallery</h1>
<ul>
<li><a href="images/1.png" onclick="showPic(this);return false;" title="基普乔格1">基普乔格1</a></li>
<li><a href="images/2.png" onclick="showPic(this);return false;" title="基普乔格2">基普乔格2</a></li>
<li><a href="images/3.png" onclick="showPic(this);return false;" title="基普乔格3">基普乔格3</a></li>
<li><a href="images/4.png" onclick="showPic(this);return false;" title="贝克勒1">贝克勒1</a></li>
<li><a href="images/5.png" onclick="showPic(this);return false;" title="贝克勒2">贝克勒2</a></li>
<li><a href="images/6.png" onclick="showPic(this);return false;" title="贝克勒3">贝克勒3</a></li>
</ul>
<div id="box">
<img id="placeholder" src="images/7.png" height="300" width="400" alt="my image gallery"/>
<p id="description">Choose a image</p>
</div>
</body>
</html>
CSS
body{
font-family: "Helvetica","Arial",serif;
color:#C0C0C0 ;
background-color:#483D8B;
margin: 1em 10%;
}
#box{
width: 400px;
height: 300px;
border:1px solid #8A2BE2;
margin: 8em 8px;
}
a{
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration:none;
}
ul{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style-type: none;
}
img{
display: block;
clear: both;
}
p{
color:#C0C0C0 ;
}
function showPic(element){
var source=element.getAttribute("href");//获取元素节点的src属性值
var placeholder=document.getElementById("placeholder");//查找placeholder元素及诶8I节点
placeholder.setAttribute("src",source);//设置placeholder的src属性值为
var description=document.getElementById("description");//获取元素p
var text=element.getAttribute("title");
description.firstChild.nodeValue=text;
}
結果は以下の通りであります：
