自由時間を使用して、JavaScriptを学んでいたときに単一の画像を閲覧する例を書きました。
コードコピーは次のとおりです。
<！doctype html public " - // w3c // dtd html 4.0 transitional // en">
<html>
<head>
<title>画像ギャラリー</title>
<Meta name = "generator" content = "editplus">
<Meta name = "Author" content = "">
<Meta name = "keywords" content = "">
</head>
<スクリプト言語= "javascript">
function showpic（pic）{
var source = whichpic.getattribute（ "href"）; //現在クリックされている要素の属性hrefの値を取得します
var placeholder = document.getElementById（ "Placeholder"）; //ターゲットを取得します
Placeholder.setattribute（ "SRC"、source）; //ターゲット属性SRCを設定して画像を変更します
var text = whichpic.getattribute（ "title"）; //現在クリックされている要素の属性タイトルの値を取得します
var description = document.getElementById（ "説明"）;
説明.firstchild.nodevalue = text; //クリック要素のタイトルを<p>に割り当てる
//またはdescription.childnodes [0] .nodevalue = text;
}
</script>
<body>
<h1> javascript画像ギャラリー</h1>
<ul>
<li>
<a href = "images/fireworks.jpg" onclick = "showpic（this）; return false;"> pic1 </a>
</li>
<li>
<a href = "images/coffee.jpg" onclick = "showpic（this）; return false;"> picture 2 </a>
</li>
<li>
<a href = "images/rose.jpg" onclick = "showpic（this）; return false;"> pic 3 </a>
</li>
<li>
<a href = "images/bigben.jpg" onclick = "showpic（this）; return false;"> picture 4 </a>
</li>
</ul>
<img id = "placeholder" src = "images /placeholder.gif" />
<p id = "description">画像を選択します。</p>
</body>
</html>
知らせ：
タグ<a> </a>にイベントを追加することに注意を払う必要があります。
解決策：関数はfalseを返します。このイベントは、リンクがクリックされていないと考えています。
HREFの値がJavaScript：void（0）の場合;ジャンプすることもできません。