ブログ練習帳

CSSを使って写真を拡大する(2)

前回のお話に引き続き、写真の拡大です。

サムネイル画像をマウスオーバーすると、大きい写真が入れ替わる、というの、やってみます。ECサイトとかで、商品の説明がたくさん切り替わるっていうのですよね？かっこいー。（E）（←括弧イーです。）

XHTML

<div id="outer">

<p><img src="img/imgBig01.jpg" width="400" height="300" alt="" /></p>

<ol>

<li><a href=""><span class="big"><img src="img/imgBig01.jpg" width="400" height="300" alt="" /></span><span class="small"><img src="img/imgSmall01.jpg" width="50" height="38" alt="" /></span></a></li>

<li><a href=""><span class="big"><img src="img/imgBig02.jpg" width="400" height="300" alt="" /></span><span class="small"><img src="img/imgSmall02.jpg" width="50" height="38" alt="" /></span></a></li>

<li><a href=""><span class="big"><img src="img/imgBig03.jpg" width="400" height="300" alt="" /></span><span class="small"><img src="img/imgSmall03.jpg" width="50" height="38" alt="" /></span></a></li>

<li><a href=""><span class="big"><img src="img/imgBig01.jpg" width="400" height="300" alt="" /></span><span class="small"><img src="img/imgSmall01.jpg" width="50" height="38" alt="" /></span></a></li>

<li><a href=""><span class="big"><img src="img/imgBig02.jpg" width="400" height="300" alt="" /></span><span class="small"><img src="img/imgSmall02.jpg" width="50" height="38" alt="" /></span></a></li>

<li><a href=""><span class="big"><img src="img/imgBig03.jpg" width="400" height="300" alt="" /></span><span class="small"><img src="img/imgSmall03.jpg" width="50" height="38" alt="" /></span></a></li>

</ol>

</div>

CSSその１

*{
	margin:0;
	padding:0;
}
#outer {
	background-color:#FCC;
	position:relative;
	height:500px;
	width:800px;
	margin:0 auto;
}
#outer p{
	position:absolute;
	top:10px;
	left:10px;
	width:400px;
	height:300px;
	background-color:#fff;
}

ol {
	list-style-type:none;
	padding-left:420px;
	padding-top:10px;
}
ol li {
	float:left;
}
li a {
	display:block;
}
li a img  {
	 border:none;
}
li a .big {
	display:none;
}
li a .small {
	padding-left:5px;
	}
li a:hover {
	position:static;
}
li a:hover .big {
	display:block;
	position:absolute;
	top:10px;
	left:10px;
}

▼サンプルはこちら

CSSその２

*{
	margin:0;
	padding:0;
}
#outer {
	background-color:#FCC;
	position:relative;
	height:500px;
	width:800px;
	margin:0 auto;
}
#outer p{
	position:absolute;
	top:10px;
	left:10px;
	width:400px;
	height:300px;
	background-color:#fff;
}

ol {
	list-style-type:none;
	position:absolute;
	top:10px;
	left:410px;
}
ol li {
	float:left;
}
li a {
	display:block;
}
li a img  {
	 border:none;
}
li a .big {
	display:none;
}
li a .small {
	padding-left:5px;
	}
li a:hover {
	position:static;
}
li a:hover .big {
	display:block;
	position:absolute;
	top:0px;
	left:-400px;
}

▼サンプルはこちら

CSSその１とその２の違いは、.bigで指定された拡大画像の位置です。absoluteで指定しているので、その親ボックスがどれかということが重要になります。その１では、#outerにrelativeが指定してあるので、#outerが親ボックスです。olの左に大きい画像を表示させますが、その余白をpaddingでとったので、position:absoluteを使用していません。

一方、その２では、olの左に拡大画像用のスペースを確保するのに、position:absoluteを利用して、olの位置指定しています。ということで.bigの親ボックスが#outerではなくolになります。なので、-400pxも左へ移動しなければならないということです。

こう考えていくと、positionって、どこが親ボックスなのかということが、とっても重要なのかなぁと思う見習です。

2011年12月16日1:21 AM| カテゴリー： HTMLとCSSのコード,見習い奮闘記| コメント (0)