どりーみー 200806

2008年05月の画像-2008年06月の画像- 2008年07月の画像

先日（2008/06/11）の「CSS だけでサムネイルギャラリー」
のcssを勉強しました。
マウスオーバーで展開、更にサムネイル画像に触れると拡大
と言うところのCSSがだいたい解かりました。面白いですね。
忘れないように書いて置きます。
サンプル



CSS部分

 /*メニューの文字に触れたら展開する　ここから*/
  /*サムネイル画像が入るtable*/
.album ul :hover table{ 
 padding:0;
 margin-top:-2px;
 display:block;
 border:1px solid red;
 border-width:0px 1px 1px 1px;}

/* メニューの一個一個のtable   文字だけの囲みになった*/
.album ul li table {    
 margin:0;
 padding:0;
 display:none;
}

/*  transparentが背景色を透過させる指定*/
.album ul li a.set:hover {
background:transparent;    
}

/*  transparentが背景色を透過させる指定*/
.album ul li:hover a.set {  
background:transparent;    
}


 /*メニューの文字に触れたら展開する　ここまで*/



/*展開したサムネイル画像の上にマウスオーバーで拡大　ここから*/

.album ul li a.set:hover li a:hover
{
	background-color: #fff;
}

.album ul li a.set:hover li a:hover img{
	width:auto;
	height:auto;
position : absolute;
top: 15px;
left: 170px;
}
/*展開したサムネイル画像の上にマウスオーバーで拡大　ここまで*/

HTML部分
<div class="album">

<ul>
<li><a class="set" href="#nogo">アジアンタム#1</a><b></b>
<ins><table><tr><td>
<ul>
<li>
<a href="#"><img src="http://blog-imgs-27.fc2.com/d/r/e/dreamy/2008-6-9-38.jpg" alt="代替" width="50"
height="50" /></a>
</li>
</ul>
</td></tr></table></ins>
</li>

</ul>
<br class="clear" />
</div>

もしメニューの文字をクリックしたら展開する
と言う場合は
「hover」ではなく「active」を使う

JavaScriptやFlashを使わずにスタイルシートだけで
サムネール画像にマウスオーバーで拡大画像を表示。サムネールクリックで拡大画像を固定。
固定した画像にリンクを入れられます。

JavaScriptやFlashを禁止されているサーバーの方も使えますね。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<title>title</title>
<style type="text/css">

</style>
</head>
<body>

<ul id="gallery">
<li><a href="#">
<img src="#1画像のURL" alt="#1" title="#1" /></a></li>
<li><a href="#">
<img src="#2画像のURL" alt="#2" title="#2" /></a></li>
<li><a href="#">
<img src="#3画像のURL" alt="#3" title="#3" /></a></li>
<li><a href="#">
<img src="#4画像のURL" alt="#4" title="#4" /></a></li>

<li class="pad"></li>
<li class="lft"><a href="#">
<img src="#5画像のURL" alt="#5" title="#5" /></a></li>
<li><a href="#">
<img src="#6画像のURL" alt="#6" title="#6" /></a></li>
<li><a href="#">
<img src="#7画像のURL" alt="#7" title="#7" /></a></li>
<li><a href="#">
<img src="#8画像のURL" alt="#8" title="#8" /></a></li>
</ul>
</body>
</html>

参考にさせていただいたサイト
Stu Nicholls CSSplay CSS Photograph Gallery with hover and active states
ありがとうございます。