ロールオーバーイメージ用のJavaScriptエンジン Version 2
先日作成したロールオーバーイメージ用のJavaScriptのバージョンアップ版。コメントにアクティブページでの画像の反転はできないのかという意見があり、急遽その機能を追加しました。
IE、Firefox、Opera、Netscapeで動作することが確認されています。おそらくSafariも問題ないと思います。
例によって、他のシステムと組み合わせていないので、ご使用の際は自己責任でお願いします。
ダウンロードはこちら
以前のものと変わってない機能はロールオーバーの部分です。以前の記事もご参考ください。
以前の記事
IE、Firefox、Opera、Netscapeで動作することが確認されています。おそらくSafariも問題ないと思います。
例によって、他のシステムと組み合わせていないので、ご使用の際は自己責任でお願いします。
ダウンロードはこちら
以前のものと変わってない機能はロールオーバーの部分です。以前の記事もご参考ください。
以前の記事
１．HTMLに少し手を加えます。
(1)まずHEADタグ内にJavaScriptの読み込み処理を記述します。
(2) まずロールオーバーしたいイメージがアンカータグにはさまれているか確認してください。
(3) そしたらそのイメージの一群を任意のタグ（divタグなど）で任意のID属性をつけて囲んでください。
２．次にJavaScriptのコードを変更していきます。
tomgs_rollover_v2.jsをエディタで開き、configの欄をカスタマイズしていきます。
targetIdには１．の(3)で指定したID属性名を記述してください。
prefixPathにはロールオーバーイメージまでのパス（ファイル名を除く）を記述します。
outImagesには例にならって、元画像のファイル名を列記していきます。もちろん拡張子も！
overImagesには例にならって、マウスカーソルが画像に乗ったときに表示する画像のファイル名を列記してください。
curPgImageには例にならって、その画像がリンクしているページが表示されているときに表示する画像のファイル名を列記してください。
outImages、overImages、curPgImagesの並びは対応するようにしてください。実際のHTMLに記述している順番に対応させる必要はありません。
curPgActivationはその画像がリンクするページが表示されている間、その画像をcurPgImagesの画像に変更するかどうかを設定します。
curPgActivationはcurPgActivationで変更した画像をハイパーリンクにするかどうかを設定します。基本的にそのリンクをクリックしたところで表示されるページは変わらないので、この機能は切っていても問題はないでしょう。
以上の2つの設定を有効にする場合は"YES"、"yes"、1のいずれかを設定してください。
逆に無効にするときは"NO"、"no"、0のいずれかを設定してください。
またcurPgActivationが無効に設定されているとき、enableCurAnchorは動作しません。
説明だけではわかりにくいと思いますので、私が趣味で作っているナイショ（？）のサイトを例として紹介します。
ここではcurPgActivation、enableCurAnchorともに有効に設定されています。
赤丸の付いている画像がcurPgActivationの設定が反映されたものです。
参考サイト
最後に一つ注意があります。
IEでの動作確認はウェブサーバーにアップロードしてからにしてください。
ローカル環境ではcurPgActivationの機能が実行できません。
これはIEのパスの表現方法によるものです。（IEではディレクトリの区切りを「\」であらわしますが、このJavaScriptでは「/」としているからです。）
(1)まずHEADタグ内にJavaScriptの読み込み処理を記述します。
<script type="text/javascript" src="./tomgs_rollover_v2.js"></script>
(2) まずロールオーバーしたいイメージがアンカータグにはさまれているか確認してください。
(3) そしたらそのイメージの一群を任意のタグ（divタグなど）で任意のID属性をつけて囲んでください。
２．次にJavaScriptのコードを変更していきます。
tomgs_rollover_v2.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");
curPgImages = new Array("menu1_2.gif", "menu2_2.gif", "menu3_2.gif");
curPgActivation = "YES";
enableCurAnchor = "YES";
//====================================================================================================
targetIdには１．の(3)で指定したID属性名を記述してください。
prefixPathにはロールオーバーイメージまでのパス（ファイル名を除く）を記述します。
outImagesには例にならって、元画像のファイル名を列記していきます。もちろん拡張子も！
overImagesには例にならって、マウスカーソルが画像に乗ったときに表示する画像のファイル名を列記してください。
curPgImageには例にならって、その画像がリンクしているページが表示されているときに表示する画像のファイル名を列記してください。
outImages、overImages、curPgImagesの並びは対応するようにしてください。実際のHTMLに記述している順番に対応させる必要はありません。
curPgActivationはその画像がリンクするページが表示されている間、その画像をcurPgImagesの画像に変更するかどうかを設定します。
curPgActivationはcurPgActivationで変更した画像をハイパーリンクにするかどうかを設定します。基本的にそのリンクをクリックしたところで表示されるページは変わらないので、この機能は切っていても問題はないでしょう。
以上の2つの設定を有効にする場合は"YES"、"yes"、1のいずれかを設定してください。
逆に無効にするときは"NO"、"no"、0のいずれかを設定してください。
またcurPgActivationが無効に設定されているとき、enableCurAnchorは動作しません。
説明だけではわかりにくいと思いますので、私が趣味で作っているナイショ（？）のサイトを例として紹介します。
ここではcurPgActivation、enableCurAnchorともに有効に設定されています。
赤丸の付いている画像がcurPgActivationの設定が反映されたものです。
参考サイト
最後に一つ注意があります。
IEでの動作確認はウェブサーバーにアップロードしてからにしてください。
ローカル環境ではcurPgActivationの機能が実行できません。
これはIEのパスの表現方法によるものです。（IEではディレクトリの区切りを「\」であらわしますが、このJavaScriptでは「/」としているからです。）
コメント