29分でできる！あのサイトの“技”を盗め ― 第10回

jQueryだけで作る、サムネイル画像を魅力的に見せる方法

2008年11月17日 09時00分更新

文● 古籏一浩、ASCII.jp

今回もお題は趣味の写真サイト――まずはHTMLの準備から

　これまでの連載でだいぶカッコよくなってきた趣味の写真サイト「JPhoto.net」を作例に今回も作業を進めていきましょう。お手本サイトのSikkerのようにサムネイル画像が並ぶ、JPhoto.netのカテゴリインデックスページにマウスオーバー効果を組み込んでいきます。

　何も組み込んでいない状態のソースコードと画面は以下のようになっています（元になる作例ページ）。


組み込む前のカテゴリインデックスページ。マウスを載せても画像に変化はありません

■元の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">
<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>
<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>
</body>
</html>

　表示するサムネイル画像は、単純に<img>タグを必要な数だけ繰り返し並べて、サムネイル画像のブロック全体を<div>タグで囲みます。この<div>タグには、スクリプトで操作するために任意のID名を指定しておきます。ここでは「photoIndex」という名前にしました。HTMLタグの準備はこれだけです。

<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>