ロールオーバーイメージ用のJavaScriptエンジン

先日作成したロールオーバーイメージ用のJavaScript。HTMLが複雑にならないようにしたつもりだが、他のシステムと組み合わせていないので、ほんとのところどうなのかはわからないけど、とりあえず掲載！
ダウンロードはこちら 最近のウェブブラウザに搭載されているイベントの発生源を求める技術を応用して作ってみました。
特徴はonmouseover属性やonmouseout属性をHTMLに記述しなくても良いというところ。つまりHTMLの横のダイエットができるといったところだろうか。

こんな場面に使えます。
リンクを貼ったイメージをロールオーバーにする。これのみ！

１．HTMLに少し手を加えます。
　(1)まずHEADタグ内にJavaScriptの読み込み処理を記述します。

<script type="text/javascript" src="/./tomgs_rollover.js"></script>

　(2) まずロールオーバーしたいイメージがアンカータグにはさまれているか確認してください。
　(3) そしたらそのイメージの一群を任意のタグ（divタグなど）で任意のID属性をつけて囲んでください。


２．次にJavaScriptのコードを変更していきます。
　tomgs_rollover.jsをエディタで開き、configの欄をカスタマイズしていきます。

//== config ==========================================================================================
  targetId   = "menu";
  prefixPath = "./images/";
  outImages  = new Array("menu1_0.gif", "menu2_0.gif", "menu3_0.gif");
  overImages = new Array("menu1_1.gif", "menu2_1.gif", "menu3_1.gif");
//====================================================================================================

targetIdには１．の(3)で指定したID属性名を記述してください。
prefixPathにはロールオーバーイメージまでのパス（ファイル名を除く）を記述します。
outImageには例にならって、元画像のファイル名を列記していきます。もちろん拡張子も！
overImageには例にならって、マウスカーソルが画像に乗ったときに表示する画像のファイル名を列記してください。
outImageとoverImageはマウスカーソルが乗っているときと乗っていないときの画像が対応するように記述してください。実際にHTMLに記述する順番と対応させる必要はありません。

記述する内容はこれで終わりです。
あとは正常に動くか確認してみてください。

• 前へ
• 次へ