画像viewerを配置する

みなさんよく、写真素材などを提供しているサイトで、小さな画像をクリックすると大きな画像が表示されるのを目にしていると思います。

これらの大部分は小さな画像に大きな画像へのリンクを設定しているだけという簡単な仕組みです。

ここでは、サムネイル、iframeを使った画像の切り替え、z-indexを使った画像の切り替えの三つの方法について解説します。

サムネイル画像を使用する

理屈は簡単で、画像に画像のリンクを設定するだけです。

小さな画像を別途用意してもかまいませんが、面倒な場合は、以下のように大きな画像を縮小して小さく見せることも可能です。

<ul class="b4">
<li><a href="jpg/35.jpg"><img src="jpg/35.jpg" alt="" width="100" height="75"></a></li>
<li><a href="jpg/36.jpg" target="info"><img src="jpg/36.jpg" alt="" width="100" height="75"></a></li>
</ul>
<p class="b5">
左はそのままのウィンドウで画像を開くが、右は別画面で画像を開く。
</p>

#a4 ul.b4 {
	margin-left:30px;
	list-style-type:none;
	}
#a4 ul.b4 li {
	display:inline;
	}

上のタグを、サンプルのh2（小見出し）以下とstyle.cssに挿入します。

ここまでの作成経過はコチラ→サンプル（ホームページ作成講座）

画像をクリックすると、画像が拡大します。

iframe（インラインフレーム）を使用した画像viewer

iframeは、html文書の中に、別のhtml文書を表示させるタグです（まぁ、テレビの中でテレビを見るみたいな感じです）。

よって、フレーム内に表示させる別のhtml文書を、フレームの幅に合わせて作成しておく必要があります。

iframeと/iframeの間の文字は、フレームが表示されなかった場合に表示される文章ですので、念のため記述しておきます。

nameは別html文書のtargetになるので、適当な名前をつけ、scrollingは今回は”no”ですが、更新履歴として使ったりするときは、"yes"としてください。

<p class="b5">
<iframe src="file/1.html" width="400" height="300" name="namae" scrolling="no">サンプル画像&glt;/iframe>
</p>
<ul class="b4">
<li><a href="file/1.html" target="namae"><img src="../jpg/35.jpg" alt="" width="100"></a></li>
<li><a href="file/2.html" target="namae"><img src="../jpg/36.jpg" alt="" width="100"></a></li>
</ul>
<p class="b5">
下の縮小画像をクリックすると、上のフレーム内に選択された画像が表示される。
</p>

ここまでの作成経過はコチラ→サンプル（ホームページ作成講座）

画像をクリックすると、フレーム内に拡大画像が表示されます。

z-indexを使った画像viewer

z-indexというのは、3次元のx,y,zのz軸の位置決めをするプロパティで、指定値の整数値が大きいほど前面のレイヤーに配置されることになります。

サンプルでは、z-index:3が一番前面のレイヤー、z-indexを指定していないulがz-index:0で一番下のレイヤーです。

<ul class="b6">
<li><a href="#"><img src="jpg/35.jpg" alt=""></a></li>
<li><a href="#"><img src="jpg/36.jpg" alt=""></a></li>
</ul>
<p class="b5">
画像にカーソルを当てると拡大されます。
</p>

スタイルシートは少し複雑です。

#a4 ul.b6 {
	margin:5px 0 5px 30px;
	position:relative; /* 基点に設定 */
	width:400px;/* 縮小画像＋拡大画像 */
	height:375px;/* 縮小画像＋拡大画像 */
	border:solid 1px #000;
	}
#a4 ul.b6 li {
	width:100px;
	height:75px;
	list-style-type:none;
	display:inline;
	background:#999;
	float:left;
	}
#a4 ul.b6 li a {
	display:block;
	width:100px;
	height:75px;
	}
#a4 ul.b6 li a img {
	position:relative;/* z-index指定のため */
	width:100px;
	height:75px;
	z-index:3;/* 最前面 */
	}
#a4 ul.b6 li a:hover {
	z-index:2;
	position:absolute;
	top:0px;
	left:0;
	width:400px;
	height:300px;
	padding-top:75px;/* 縮小画像分の余白 */
	}
#a4 ul.b6 li a:hover img {
	width:400px;
	height:300px;
	}
#a4 ul.b6 li a:active,
#a4 ul.b6 li a:focus {
	position:absolute;
	top:75px;
	left:0;
	width:400px;
	height:300px;
	}
#a4 ul.b6 li a:active img,
#a4 ul.b6 li a:focus img {
	position:relative;
	z-index:1;
	width:400px;
	height:300px;
	}

これで完成！サンプルはコチラ→サンプル（ホームページ作成講座）

マウスを当てると画像が拡大されます。

Lesson9～画像ビュアーの作成～

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>