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

前回に引き続き、CSSで画像を拡大するです。この前まではマークアップにリストを使いましたが、dlでマークアップしてみました。dlって、画像をコーディングするときによく使うし、liに比べてdtやddが使えるので、クラスやIDの数を減らせるという利点があります。

前々回のお話や、前回のお話は、こちらから。

ということで、いってみよー。

XHTML

<div id="outer">

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

<dl><a href=""><dt><img src="img/imgBig01.jpg" width="400" height="300" alt="" /></dt><dd><img src="img/imgSmall01.jpg" width="50" height="38" alt="" /></dd></a></dl>

<dl><a href=""><dt><img src="img/imgBig02.jpg" width="400" height="300" alt="" /></dt><dd><img src="img/imgSmall02.jpg" width="50" height="38" alt="" /></dd></a></dl>

<dl><a href=""><dt><img src="img/imgBig03.jpg" width="400" height="300" alt="" /></dt><dd><img src="img/imgSmall03.jpg" width="50" height="38" alt="" /></dd></a></dl>

<dl><a href=""><dt><img src="img/imgBig01.jpg" width="400" height="300" alt="" /></dt><dd><img src="img/imgSmall01.jpg" width="50" height="38" alt="" /></dd></a></dl>

<dl><a href=""><dt><img src="img/imgBig02.jpg" width="400" height="300" alt="" /></dt><dd><img src="img/imgSmall02.jpg" width="50" height="38" alt="" /></dd></a></dl>

<dl><a href=""><dt><img src="img/imgBig03.jpg" width="400" height="300" alt="" /></dt><dd><img src="img/imgSmall03.jpg" width="50" height="38" alt="" /></dd></a></dl>

<dl><a href=""><dt><img src="img/imgBig01.jpg" width="400" height="300" alt="" /></dt><dd><img src="img/imgSmall01.jpg" width="50" height="38" alt="" /></dd></a></dl>

<dl><a href=""><dt><img src="img/imgBig02.jpg" width="400" height="300" alt="" /></dt><dd><img src="img/imgSmall02.jpg" width="50" height="38" alt="" /></dd></a></dl>

<dl><a href=""><dt><img src="img/imgBig03.jpg" width="400" height="300" alt="" /></dt><dd><img src="img/imgSmall03.jpg" width="50" height="38" alt="" /></dd></a></dl>

</div>

CSS

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

a {
	display:block;
}
a img  {
	 border:none;
}
a dt {
	display:none;
}
a dd {
	padding-left:420px;
	padding-top:5px;
	float:left;
	}
a:hover {
	position:static;
}
a:hover dt {
	display:block;
	position:absolute;
	top:5px;
	left:10px;
}

▼サンプルはこちら

どうしてだか、IE6でのみ、ddにfloat:leftを入れてやらないと、画像が踊りだしました。マウスが移動するたび、画像が動くのです。ハテ…。最初、IE6でチェックしたら、変な動きをするので、ためしにddに背景色をつけてみました。すると意味不明な背景色がつくので、ここが問題かなと思ったのですが、原因は何でしょう…。ここにフロートかけたら何とかなりそうという、カンでやってしまいました。

いつか、分かる日がくるとイイな、と楽観的に逃げる見習です。とほほ。

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