共有登録PCテンプレート
最近のコメント
recent comment
最新の記事
プロフィール

dramy

  • Author:dramy
  • 気に入った事はとことんやってしまいます。
    ほどほどにしたいものデス。ヾ(´▽｀*)ゝ
月別アーカイブ
カテゴリー
recent trackback
pictlayer
サムネイルリンク

ホームページ作成NAVI
stroll::blog
scripts for livedoor
. BLOG ドツトブログ
ウェブデザイン王への道
くらふと工房 HILL TOP
FC2コメント欄での絵文字
♪　NATURAL　SPOT　♪
不思議な不正義

ブログ内検索
RSSフィード
リンク

このブログをリンクに追加する

カウンター


開始2005-09-03 15:07:42

TB_People
カレンダー

09 | 2008/10 | 11
日 月 火 水 木 金 土
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -

ブロとも一覧


■ ブログ名：OHANA CAFE
ブロとも申請フォーム

この人とブロともになる

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

2008/06/11 16:17

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
ありがとうございます。
html | トラックバック(0) | comment(0)▲

comment

投稿














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

trackback

trackback url　↓

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




| ホーム |


Template production /title_1 無料ホームページ アフィリエイト レンタルサーバーFC2ブログ