なんだかいまさらな感じですが、相変わらずのIE6で惑わされたので、また使えるように覚書です。

HTML側はこんな感じ

        <ul id="gallery">
            <li>
                <a href="#"><img src="images/gallery_img2s.jpg" alt="gallery thumbnail" /><span><img src="images/gallery_img2.jpg" alt="gallery image" /></span></a>
            </li>
            <li>
                <a href="#"><img src="images/gallery_img3s.jpg" alt="gallery thumbnail" /><span><img src="images/gallery_img3.jpg" alt="gallery image" /></span></a>
            </li>
            <li>
                <a href="#"><img src="images/gallery_img4s.jpg" alt="gallery thumbnail" /><span><img src="images/gallery_img4.jpg" alt="gallery image" /></span></a>
            </li>
            <li>
                <a href="#"><img src="images/gallery_img5s.jpg" alt="gallery thumbnail" /><span><img src="images/gallery_img5.jpg" alt="gallery image" /></span></a>
            </li>
        </ul>

listの中に大きい画像と小さい画像が同時に格納されています。
大きい画像がで囲われているのがポイントです。

CSS側 はこんなんです。

ul#gallery, ul#gallery li{
	margin:0;
	padding:0;
	list-style:none;
}
ul#gallery{
	background:url(../images/gallery_bg.jpg) no-repeat right top;
	width:690px;
	min-height:300px;
	height:auto !important;
	height:100%;
	position:relative;
}
ul#gallery li{
	margin-right:190px;
	margin-bottom:10px;
	zoom:1;
}
ul#gallery li a span{
	display:none;
}
ul#gallery li a:hover{
	background:transparent none repeat scroll 0 0;
	z-index:100;
}
ul#gallery li a:hover span{
	display:block;
	position:absolute;
	width:500px;
	min-height:300px;
	height:auto !important;
	height:100%;
	top:0;
	left:190px;
}

左にサムネイル。右にプレビュー画像のレイアウトになります。
レイアウト関係はpositonで簡単に動かせると思うので、サムネイルを下やら上やら、色々使ってみようと思います。

このテクニックも参考サイトがあるんですけど、
参考にさせてもらったサイト様で出ていたソースそのままだと、IE6がうまく動きませんでした。
どうもdisplayプロパティの順番だとかで、IE6だけマウスオーバーが効かなかったりしたっぽいのですが、
理由はなんだかわかりません。

タグ:, , , ,

関連する投稿