スクリプトを組み込もう
HTMLタグとスタイルシートの準備ができたら、あとはスクリプトを組み込むだけです。まず、ツールチップを表示するための「SpryTooltip.js」ファイルを読み込ませます。サンプルではjsフォルダ内に入れてあるので、以下のように<script>タグを使ってファイルのある場所（パス）を指定します。
<script type="text/javascript" src="js/SpryTooltip.js"></script>
これで動けばよいのですが、残念ながらこれだけでは何も起こりません。どのレシピ画像がどのツールチップに対応しているか、まだ指定していないからです（当然ですね！）。レシピ画像のID名とツールチップのID名の対応は、スクリプトで以下のように指定します。
new Spry.Widget.Tooltip("recipeText1", "#recipe1");
Tooltip（）は「ID名がrecipe1の画像とID名recipeText1のツールチップが対応している」ことを定義するための命令です。今回は画像が6つあるので、以下のようにすべての対応を指定できます。
new Spry.Widget.Tooltip("recipeText1", "#recipe1");
new Spry.Widget.Tooltip("recipeText2", "#recipe2");
new Spry.Widget.Tooltip("recipeText3", "#recipe3");
new Spry.Widget.Tooltip("recipeText4", "#recipe4");
new Spry.Widget.Tooltip("recipeText5", "#recipe5");
new Spry.Widget.Tooltip("recipeText6", "#recipe6");
これでツールチップの組み込みは完了です！……と言いたいところですが、ここでもうひと工夫。上の方法だと、もしツールチップが100個、1000個になったときに、同じような記述をその分だけ追加しなければなりません。これでは大変です。そこで、以下のように書いてみましょう。
for (var i=1; i<=6; i++){
new Spry.Widget.Tooltip("recipeText"+i, "#recipe"+i);
}
仮にツールチップが30個あったら、for (var i=1; i<=6; i++)の6を30に書き換えるだけです。これなら、ツールチップが増えても減っても簡単に修正できます。先ほどHTMLタグの設定のときに、「ID名に名前と番号を組み合わせておくとラク」と説明したのは、この方法を使いたかったからでした。スクリプトは「myscript.js」という名前にしてjsフォルダ内に保存しておきます。最後に<script>タグを使って読み込ませれば完成です。
<script type="text/javascript" src="js/myscript.js"></script>
さっそく完成した作例を見てみましょう。6つのレシピ画像の上にマウスを乗せると、それぞれの料理の名前や用途を示した大きなツールチップが表示されます。以下のようにうまく表示されれば、今回の課題「ツールチップの組み込み」は成功です（完成した作例ページ）。
完成！ レシピ画像の上にマウスを乗せると料理に応じたツールチップが表示されるようになりました
今回紹介したように、ライブラリ／フレームワークを使えば、商用サイトで見かけるようなちょっとした“技”を、手軽に自分のサイトに取り込めます。ぜひ、解説を参考にしながら実際に試してみてください。次回以降もすぐに使えるネタを紹介していきますので、どうぞお楽しみに。
（作例デザイン：wataru）
（作例写真：写真素材 足成）
■もっと勉強したい人のためのオススメBOOK（Amazon.co.jp）
- 基本からしっかりわかる Adobe Spryプログラミングブック
- たにぐち まこと著、毎日コミュニケーションズ刊
- 改訂第4版 JavaScript ポケットリファレンス
- 古籏一浩著、技術評論社刊
- Dreamweaver 逆引きデザイン事典
- 植木友浩/土岩史幸/神森 勉著、翔泳社刊
