29分でできる！ あのサイトの“技”を盗め ― 第10回
jQueryだけで作る、サムネイル画像を魅力的に見せる方法
2008年11月17日 09時00分更新
■完成したHTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" href="css/init.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<title>JPhoto.net - Recent Entries -</title>
</head>
<body>
<div id="contents">
<h1>JPhoto.net</h1>
<ul id="globalMenu">
<li><a href="top.html" id="menu-top">Top</a></li>
<li><a href="photo.html" id="menu-gallery" class="current">Gallery</a></li>
<li><a href="search.html" id="menu-search">Search</a></li>
<li><a href="ranking.html" id="menu-ranking">Ranking</a></li>
<li><a href="info.html" id="menu-info">Information</a></li>
</ul>
<br style="clear:both;">
<div class="photoAlbum recent" style="margin-top:20px">
<h2><img src="images/photo/menu01.gif" width="120" height="13"></h2>
</div>
<div id="photoIndex">
<a href="photo109.html"><img src="thumbnail2/photo109.jpg"></a>
<a href="photo108.html"><img src="thumbnail2/photo108.jpg"></a>
<a href="photo107.html"><img src="thumbnail2/photo107.jpg"></a>
<a href="photo106.html"><img src="thumbnail2/photo106.jpg"></a>
<a href="photo105.html"><img src="thumbnail2/photo105.jpg"></a>
<a href="photo104.html"><img src="thumbnail2/photo104.jpg"></a>
<a href="photo103.html"><img src="thumbnail2/photo103.jpg"></a>
<a href="photo102.html"><img src="thumbnail2/photo102.jpg"></a>
<a href="photo101.html"><img src="thumbnail2/photo101.jpg"></a>
<a href="photo100.html"><img src="thumbnail2/photo100.jpg"></a>
<a href="photo099.html"><img src="thumbnail2/photo099.jpg"></a>
<a href="photo098.html"><img src="thumbnail2/photo098.jpg"></a>
<a href="photo097.html"><img src="thumbnail2/photo097.jpg"></a>
<a href="photo096.html"><img src="thumbnail2/photo096.jpg"></a>
<a href="photo095.html"><img src="thumbnail2/photo095.jpg"></a>
</div>
<div id="footer">
<p>Copyright JPhoton.net 2008 all rights reserved.</p>
</div>
</div>
<script type="text/javascript"><!--
// 特定の画像だけにスポットをあてる
$("#photoIndex img").hover(
function(){ // マウスオーバー
$("#photoIndex img").fadeTo(0.1, 0.25);
$(this).fadeTo(0.1, 1);
},
function(){ // マウスアウト
$("#photoIndex img").fadeTo(0.1, 1);
}
);
// --></script>
</body>
</html>
この連載の記事
- 第26回 普通のtableタグを1行で動く表にするJSライブラリ
- 第25回 Googleマップ＋jQueryで作るAjaxなデザイン
- 第24回 英国の映像作家も使うJS製LavaLampメニュー
- 第23回 jQueryでクールなくるくるウィジェットを作ろう
- 第22回 Amazonと楽天のアフィリエイトを効率化するjQuery技
- 第21回 意外性が心地よいJSメニューのWebデザイン
- 第20回 jQueryで作るAmazon流リキッドレイアウト
- 第19回 Yahoo！の流れるパネルをJSライブラリで再現
- 第18回 あのFlashサイトのUIをjQueryで作る
- 第17回 JavaScriptでびゅんびゅんスライド！ページ切換法
- この連載の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
