ボタンを複数並べてクリックで画像を表示
ボタンを複数並べて、各ボタンをクリック（またはマウスを合わせる）すると、指定した場所の画像を切り替え表示します。複数ある画像の場合はすぐその場で大きなサイズの画像を閲覧でき、閉じるボタンを押す必要はありません。またボタンの代わりにサムネイル画像に変更も容易です。
ジャバスクリプトを用いていますが、コピペで簡単に適用できます。
ジャバスクリプト
<head>と</head>の間に下記のスクリプトを記載する。
<script type="text/javascript">
<!--
function Imgche(ado)
{
document.space.src=ado;
}
// -->
</script>
HTML
<body>と</body>の間に下記を記載する。
<p>
<img src="最初に表示する画像のファイル名" width="幅"
height="高さ" name="space">
</p>
<p>
<button
onClick="Imgche('表示する画像のファイル名1')">ボタンに表示する内容1</button>
<button
onClick="Imgche('表示する画像のファイル名2')">ボタンに表示する内容2</button>
<button
onClick="Imgche('表示する画像のファイル名3')">ボタンに表示する内容3</button>
</p>
表示する画像の数だけ「<button・・・・/button>」を増減させます。
ボタン及び画像の配置場所、形式等は別途CSSで指定します。
画像の大きさは問いませんが、同じ大きさにした方がベターです。
マウスを合わせた時に画像を変えるには「onClick」の部分を「onMouseover」にします。
サムネイル画像を使用する場合は「<button」の部分を「<img src="小さな画像ファイル名1" 」に替えます。
<p>
<img src="最初に表示する画像のファイル名" width="幅"
height="高さ" name="space">
</p>
<p>
<img
src="小さな画像ファイル名1" onClick="Imgche('表示する画像のファイル名1')">
<img
src="小さな画像ファイル名2" onClick="Imgche('表示する画像のファイル名2')">
<img
src="小さな画像ファイル名3" onClick="Imgche('表示する画像のファイル名3')">
</p>