スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーサイト/--/--/-- --:--/スポンサー広告/ トラックバック(-)/コメント(-)

CSS だけでサムネイルギャラリー

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">
<!--
ul#gallery {
padding:5px 0px 0px 10px; /*上、右、下、左*/
margin:0px;
width:204px;
height:170px;
border:1px solid pink; 
position:relative;
background:url(背景画像のURL) no-repeat fixed top left;/**/
-height:155px;
-width:212px;
}
#gallery li {
list-style-type:none;
width:50px;
height:37px;
float:left;
z-index:100;
-width:45px;
-height:34px;
}
#gallery li.lft {
float:left;
clear:left;
}
#gallery li.rgt {
float:right;
clear:right;
}

#gallery a {
position:relative;
width:50px;
height:37px;
display:block;
float:left;
z-index:100;
cursor:default;
margin: 5px 2px 2px 0px; /*上、右、下、左*/
background: url(画像の影のURL) bottom right;
float: left;
width: auto;
-width:45px;
-height:34px;
}
#gallery a img {
position:relative;
width:50px;
height:37px;
border:1px solid #888;
z-index:100;
background: #ffffff;
border: 0px solid #999;
padding:1px;/*元5*/
position: relative;
left: -7px;
top: -7px;
-padding:1px;/*元5*/
-border: 1px solid #999;
-width:45px;
-height:34px;
}
#gallery a:hover {
width:203px;
height:151px;
padding:0px 0px 2px 9px; /*上、右、下、左*/
position:absolute;
left:12px;
top:20px;
z-index:200; /*マウスを当てた時画像が前面に現れる・元は20*/
-padding:0px 0px 2px 9px; /*上、右、下、左*/
-left:2px;
-top:10px;
}
#gallery a:hover img {
background:#eee;
position:relative;
width:203px;
height:151px;
border:0;
z-index:200; /*マウスを当てた時画像が前面に現れる・元は10*/
}
#gallery a:active, #gallery a:focus {
background:transparent;
width:203px;
height:151px;
padding:7px 0px 0px 0px; /*上、右、下、左*/
position:absolute;
left:0;
top:0;
z-index:400; /*クリックした時画像が前面に現れる・元は10*/
}
#gallery a:active img, #gallery a:focus img {
background:#eee;
position:relative;
width:203px;
height:151px;
border:0;
z-index:400;/*マウスを当てた時画像が前面に現れる・元は10*/
}
/* hack for Internet Explorer */
#gallery li.pad {
height:0;
display:block;
margin-top:-2px;
width:203px;
font-size:0;
padding-top:93px; /*サムネイル画像下の列・上の列の下端からのpadding*/
-padding-top:83px; /*サムネイル画像下の列・上の列の下端からのpadding*/
}

/* hack for Opera 7+ */
@media all and (min-width:0px){
#gallery a:hover {
background:#888;
width:203px;
height:151px;
padding:7px 0px 0px 0px; /*上、右、下、左*/
position:absolute;
left:0;
top:0;
z-index:100;/*元10*/
}
#gallery a:hover img {
background:#aaa;
position:relative;
width:160px;
height:120px;
border:0;
z-index:100;/*元10*/
}-->
</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
ありがとうございます。
CSS だけでサムネイルギャラリー/2008/06/11 16:17/[html] html/ トラックバック(0)/ comment(0)

comment

投稿















管理者にだけ表示を許可する

trackback

trackback url ↓

http://dreamy.blog2.fc2.com/tb.php/106-9af6ab91


| ホーム |

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。