jQuery Fisheyeプラグイン
jQuery FishEyeプラグインは、アイコンにマウスオーバーするとアイコンが拡大表示されるプラグインです。例えば、図5のように都道府県名が横一列に表示されているような箇所に適用した例を図6に示します。
図5 jQuery FishEyeプラグイン使用前
図6 jQuery FishEyeプラグイン使用後
Ian Suttle's Blogからjquery.fisheye.jsをダウンロードし、pluginsフォルダにfisheyeフォルダを作成し、配置します。
リスト3にjQuery FishEyeプラグインの使用例を示します。
［リスト3］jQuery Fisheyeプラグインの使用例（jQueryPlugin_effect_Sample_after.html）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQueryプラグイン（effect) サンプル</title>
<!--1.jQueryの読み込み-->
<script type="text/javascript" src="Scripts/jquery-1.5.2.min.js"></script>
<!--2.プラグインの読み込み-->
（中略）
<script type="text/javascript" src="plugins/fisheye/jquery.fisheye.js"></script>
<!--3.CSSの設定-->
<style type="text/css">
（中略）
#FishEyeContainer
{
clear: both;
height: 40px;
z-index: 40;
}
.FishEye
{
border: 0px;
margin: 2px;
padding: 5px;
float: left;
vertical-align: middle;
}
.FishEyeStandard
{
height: 40px;
width: 40px;
}
</style>
<!--4.プラグインの設定-->
<script type="text/javascript">
$(function () {
（中略）
$("#FishEyeContainer").FishEye({
fishEyeItemName: ".FishEye",
maxScalePct: 50,
scaleStepPct: 50
});
});
</script>
</head>
<body>
<h1>jQueryプラグイン（effect) サンプル</h1>
（中略）
<h2>住所によるグループ検索</h2>
<ul>
<li>都道府県から探す</li>
</ul>
<div id="FishEyeContainer">
<a href="#"><img class="FishEye FishEyeStandard" src="images/Tochigi.png" alt="栃木" /></a>
（中略）
<a href="jQueryPlugin_effect_Sample_after_searchGroup_Tokyo.html"><img class="FishEye FishEyeStandard" src="images/Tokyo.png" alt="東京" /></a>
（中略）
<a href="#"><img class="FishEye FishEyeStandard" src="images/Shizuoka.png" alt="静岡" /></a>
</div>
</div>
</body>
</html>
今回は、都道府県ごとの画像を準備しました。これらはimagesフォルダに配置します。jquery.fisheye.jsを読み込み、「3.CSSの設定」で、アイコンのスタイルを指定します。こちらは、必要に応じて書き換えてください。
プラグインそのものは「4.プラグインの設定」のように、表示領域のid属性を指定し、FishEyeメソッドを使用します。アイコンにマウスオーバーした時に拡張される割合などを引数で指定します。そして、並べるアイコン、1つ1つのclass属性はFishEye FishEyeStandardと指定します。
FishEyeメソッドのオプションを表2に示します。
表2 FishEyeメソッドのオプション
| オプション | 説明 |
| fishEyeItemName | プラグインを適用させたいアイコンのクラス名 |
| maxScalePct | アイコンにマウスオーバー時に拡張される割合（%） |
| scaleStepPct | アイコンの拡張後、戻る割合（%） |
