ブログ練習帳

12月2011

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)

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

CSS、とくにhoverの動きが面白くなってきた見習、マウスを乗せると写真が拡大するっていうのをやってみたくなりました。とはいえ、敷居はかなーり高そう。ちょっとずつですぅ。

まず、その場でマウスを乗せると写真が大きくなるの、やってみます。

拡大用の写真とサムネイル用の写真を2枚、最初に加工しておきます。

XHTML

<div id="outer">

<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>

</ol>

</div>

CSS

*{
	margin:0;
	padding:0;
}
div#outer {
	width:550px;
	height:350px;
	background-color:#FCC;
	margin:50px auto;}

#outer li {
	float:left;
	margin:5px;
}
#outer li img {
	border:none;
}
#outer ol {
	list-style-type:none;
}
#outer a {
	display:block;
}
#outer a:hover {
	position:relative;
	/*IE6/7対策*/
}
#outer a:hover .small img{
	visibility:hidden;
/*	hoverのときに、サムネイルを隠す*/
}
#outer a .big img{
	display:none;
/*	最初は大画像は非表示*/
}
#outer a:hover .big img{
	display:block;
/*	hoverで大画像を表示*/
}

▼サンプルはこちら

追加。ウェブにあげる写真はHTMLでサイズを指定するよりも、元からしっかり画像処理しておくべき、っていいますが、一応、HTML的にwidthやheightを指定してやれば、サイズ変更できます。ということで、大小の写真を準備せず、大きいものだけを用意し、HTML的にサイズ変更してもできます。で試してみました。

CSSは上のと変更なしで、XHTMLのみ変更です。

XHTML

<div id="outer">

<ol>

<li><a href="">

<span class="big"><img src="img/imgBig01.jpg" width="400" height="300" alt="" /></span>

<span class="small"><img src="img/imgBig01.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/imgBig02.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/imgBig03.jpg" width="50" height="38" alt="" /></span>

</a></li>

</ol>

▼サンプルはこちら

あれ？どうせ拡大・縮小をCSSでやるなら、これだって同じような…。

XHTML

<div id="outer">

<ol>

<li><a href="">

<img src="img/imgBig01.jpg" alt="" />

</a></li>

<li><a href="">

<img src="img/imgBig02.jpg" alt="" />

</a></li>

<li><a href="">

<img src="img/imgBig03.jpg" alt="" />

</a></li>

</ol>

</div>

CSS

*{
	margin:0;
	padding:0;
}
div#outer {
	width:550px;
	height:350px;
	background-color:#FCC;
	margin:50px auto;}

#outer li {
	float:left;
	margin:5px;
}
#outer li img {
	border:none;
}
#outer ol {
	list-style-type:none;
}
#outer a {
	display:block;
}
#outer a:hover {
	position:relative;
	/*IE6/7対策*/
}

#outer a img{
	widht:50px;
	height:38px;
/*	最初は画像は小さく表示*/
}
#outer a:hover img{
	width:400px;
	height:300px;
/*	hoverで大画像を表示*/
}

▼サンプルはこちら

とりあえず、なんか、写真がかわるじゃん！とうれしくなる見習です。がんばるぞー。

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