まずは素材――命名規則に沿って切り替え画像を用意
作例は前回同様、趣味の写真サイト「JPhoto.net」ですが、今回からはトップページではなく、ギャラリーページに新機能を組み込んでいきたいと思います。今回は、ギャラリーの写真部分にマウスカーソルを合わせると、作品名や撮影場所、日時などを示す画像に切り替わるように変更します。
はじめに、何も組み込んでいない状態のページとソースコードを確認しておきましょう。以下のようになっています（元になる作例ページ）。
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">
<meta name="generator" content="手入力でござる">
<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 - PHOTO -</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;">
<ul class="photo-menu photo-header">
<li class="menu01"><a href="#sect1">Recent Entries</a></li>
<li class="menu02"><a href="#sect2">Traditional Beauty</a></li>
<li class="menu03"><a href="#sect3">Modern Beauty</a></li>
</ul>
<div class="photoAlbum recent">
<a id="sect1" name="sect1"></a>
<h2><img src="images/photo/menu01.gif" width="120" height="13"></h2>
<a href="photo/photo1.html"><img src="images/photo1_rollout.jpg"></a><a href="photo/photo2.html"><img src="images/photo2_rollout.jpg"></a><a href="photo/photo3.html"><img src="images/photo3_rollout.jpg"></a>
<a href="recent.html" class="more">More...</a>
</div>
<div class="photoAlbum traditional">
<a id="sect2" name="sect2"></a>
<h2><img src="images/photo/menu02.gif" width="120" height="13"></h2>
<a href="photo/photo4.html"><img src="images/photo4_rollout.jpg"></a><a href="photo/photo5.html"><img src="images/photo5_rollout.jpg"></a><a href="photo/photo6.html"><img src="images/photo6_rollout.jpg"></a>
<a href="traditional.html" class="more">More...</a>
</div>
<div class="photoAlbum modern">
<a id="sect3" name="sect3"></a>
<h2><img src="images/photo/menu03.gif" width="120" height="13"></h2>
<a href="photo/photo7.html"><img src="images/photo7_rollout.jpg"></a><a href="photo/photo8.html"><img src="images/photo8_rollout.jpg"></a><a href="photo/photo9.html"><img src="images/photo9_rollout.jpg"></a>
<a href="modern.html" class="more">More...</a>
</div>
<ul class="photo-menu photo-footer">
<li class="menu01"><a href="#sect1">Recent Entries</a></li>
<li class="menu02"><a href="#sect2">Traditional Beauty</a></li>
<li class="menu03"><a href="#sect3">Modern Beauty</a></li>
</ul>
<div id="footer">
<p>Copyright JPhoton.net 2008 all rights reserved.</p>
</div>
</div>
</body>
</html>
先ほど紹介したとおり、今回使用するrollover2.jsはスクリプトを書かなくても動作するようになっています。ただし、そのためには、ちょっとした仕掛けがあるのです。ヒントは、ロールオーバーで使用する画像のファイル名にあります。
rollover2.jsでは通常の画像のファイル名とマウスが重なった時の画像のファイル名に「特定の命名規則」を持たせています。この命名規則に従って画像さえ用意しておけばできあがり、というわけです。
通常の状態の画像はファイル名の末尾に「_rollout」をつけます。「photo1.jpg」という画像ファイルなら以下のような名前に変更しておきます。
photo1_rollout.jpg
マウスが乗った場合に切り替える画像は、ファイル名の末尾に「_rollover」をつけます。
photo1_rollover.jpg
これらの_rolloutと_rolloverをつけた画像ファイルを同じフォルダに入れておきます。切り替えたい分だけ画像ファイルを用意しておけば、今回の作業はほぼ終わったも同然です。
今回用意した作例用画像。左＝「photo1_rollout.jpg」、右＝「photo1_rollover.jpg」
