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)