「陽だまり」ホームページ > パソコンお助け情報INDEX > Webページ作成 INDEX

小さい画像から大きい画像を表示

パソコンお助け情報

ホームページで小さい画像をクリックして、大きい画像が見られるようにするにはどうしたらよいか。

いろいろな方法がありますが、次の例でいずれの場合も小さい画像ファイル(例えばimg1_s.jpg, img2_s.jpg…)と大きい画像ファイル(例えばimg1_l.jpg, img2_l.jpg…)をセットで作り同じフォルダに保存しておきます。

1 別のページに移動して大きい画像を一つずつ表示する場合
Webページを次のように作りそれぞれファイル名をつけて画像と同じフォルダに保存します。

元のページです。  ファイル名 album.html
<html>
<head>
<title>小さい画像</title>
</head>
<body>
<a href="large_1.html">
<img src ="img1_s.jpg">一番目の画像</a>
<br>
<a href="large_2.html">
<img src="img2_s.jpg">二番目の画像</a>
<br>
</body>
</html>

別のページを次のように画像ファイルごとに作ります。
ファイル名 large_1.html
<html>
<head>
<title>一番目の画像</title>
</head>
<body>
<img src="img1_l.jpg">
</body>
</html>


上のファイルは画像ファイルの数作成します。
ファイル名は画像とHTMLが数字で対応しています。
album.html ⇒ JavaScript を使っています。
album.html を開き、画像をクリックすると、別のページに移動して大きい画像が表示されます。

2  同じページに表示する場合
 Webページを次のように作り、画像ファイルと同じフォルダにファイル名「album_2.html」で保存します。
「img0_l.jpg」という最初に大きく表示する案内の画像ファイルを用意しておくと良いでしょう。

<html>
<head>
<title>同じページに表示</title>
</head>
<body>
<img src ="img1_s.jpg" onclick="img.src='img1_l.jpg'">
<img src ="img2_s.jpg" onclick="img.src='img2_l.jpg'"><br>
<img src="img0_l.jpg" name="img">
</body>
</html>


album_2.html を開くと小さい画像と「img0_l.jpg」の大きい画像が表示されています。
一番目の小さい画像をクリックすると、大きい一番目の画像が表示されます。
二番目の小さい画像をクリックすると、大きい二番目の画像が表示されます。
album_2.html ⇒ 
JavaScript を使っています。
3 小さい画像をクリックして別のページを開き大きい画像を表示する。
元のページはそのままで、新しいページをいくつも表示できますが、用済みのページは閉じる必要があります。

<html>
<head>
<title>別のページを開く</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- function wopen1(){
window.open("img1_l.jpg","WindowOpen1","status=yes,toolbar=yes,width=540,height=380") }
function wopen2(){
window.open("img2_l.jpg","WindowOpen2","status=yes,toolbar=yes,width=540,height=380") }
//-->
</SCRIPT>
</head>
<body>
画像をクリックしてください<Br>
<img src ="img1_s.jpg" onclick="wopen1()"><br>
<img src="img2_s.jpg" onclick="wopen2()"><br>
</body>
</html>


JavaScriptを使っています。
キー入力が面倒ですから、枠の中を選択してコピーしメモ帳などに貼り付けて、htmlファイルとして保存して試してみてください。
album_3.html JavaScript を使っています。
(2003/04/21 UP)

「陽だまり」ホームページ > パソコンお助け情報INDEX > Webページ作成 INDEX

作成&連絡先 NET・陽だまり