jQueryだけで作る、サムネイル画像を魅力的に見せる方法 (5/5)
2008年11月17日 09時00分更新
文●古籏一浩、ASCII.jp
■完成した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>
