ブログ練習帳

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)