08/22(Fri) 08:30
o メニューにマウスがあたると画像を反転(２)

メニュー画像にマウスが当たると画像を反転させます。「メニューにマウスがあたると画像を反転(１)」との違いはアンカー（文字）を画像にしたものです。
下のメニューにマウスをあてて見て下さい。メニュー画像が白から赤に変化します。どのメニューが選択されたかが一目で解り親切ですね。





■ 設置方法
  1. 下の関数をヘッダ部<HEAD>〜</HEAD>に記述します。
    ・イメージオジェクト

  2. 本文<BODY>〜</BODY>中の表示したい場所に以下を記述します。
    ・メニュー／画像表示

■ 下の関数をヘッダ部<HEAD>〜</HEAD>に記述します。

■イメージオジェクト

  1. 関数onSelect(n)はマウスが乗った時、offSelect(n)は離れた時の処理をします。

  2. dir = "./logo/";に画像のパスを指定します。HTML文の直下のlogディレクトリに画像を置いた時は./logo/になります。パスの指定のしかたはこちらです。

  3. 配列onimgとoffimgに、マウスが乗った時の画像、マウスが離れた時の画像をそれぞれ定義します。画像を追加する時は配列の最後にペアで追加します。

  4. document.images["imge" + n].srcの"imge" + nは、本文中に記述される<IMG>タグで指定されたNAME="imge〇〇"に対応します。例えば、<IMG>タグでNAME="imge1"と書いた場合は、nは1になります。

  5. if (document.images)は、IE3.xxのようにイメージオブジェクトが使えないブラウザでは処理しないように判定します。

<SCRIPT language="JavaScript"> <!-- //画像反転(2) by「菊池さん」<http://kikuchisan.net/> //画像のpreload if (document.images) { var dir = "./logo/"; //画像のパス var onimg = new Array("profile_on.gif", "pc_on.gif", "ryokou_on.gif", "recipe_on.gif") var offimg = new Array("profile_off.gif","pc_off.gif","ryokou_off.gif","recipe_off.gif") var onsel = new Array(); var offsel = new Array(); for (i = 0; i < onimg.length; i++) { onsel[i] = new Image(); offsel[i] = new Image(); onsel[i].src = dir + onimg[i]; offsel[i].src = dir + offimg[i]; } } //イメージオブジェクト function onSelect(n) { if (document.images) { document.images["imge" + n].src=onsel[n].src; } } function offSelect(n) { if (document.images) { document.images["imge" + n].src=offsel[n].src; } } // --> </SCRIPT>

■ 本文<BODY>〜</BODY>中の表示したい場所に以下を記述します。

■ メニュー／画像表示

  1. a href="ubu.html"のubu.htmlには画像項目がクリックされた時のジャンプ先を記述します。この例では、画像がクリックされるとHTML文と同じ場所にあるubu.htmlにジャンプします。

  2. onMouseOver="onSelect(0)"、onMouseOut="offSelect(0)"はそれぞれマウスが乗った時、離れた時の処理をします。
    数字0はname="imge0"に対応して、それぞれonSelect(0)、offSelect(0)と同じにします。

  3. img src="logo/profile_off.gif"には、初期画像(マウスが離れた時に表示する画像)を指定します。

  4. name="imge0"、name="imge1"はこの画像に付けられた固有の名前です。
    (注)「imge」の名前を変えることが出来ます。この時は、onSelect(n)、offSelect(n)内の「imge」も変更するのを忘れないで下さい。

  5. width=98 height=16は画像サイズです。あなたの使用する画像のサイズに変更します。

  6. メニュー項目を追加する時は、記述例の１行単位で追加し、name="imge0"の0をダブらない様にします。
メニュー項目の記述例
<a href="ubu.html" onMouseOver="onSelect(0)" onMouseOut="offSelect(0)"> <img src="logo/profile_off.gif" name="imge0" border="0" width=98 height=16></a><br> <a href="ubu.html#pc" onMouseOver="onSelect(1)" onMouseOut="offSelect(1);"> <img src="logo/pc_off.gif" name="imge1" border="0" width=98 height=16></a><br> <a href="father.html" onMouseOver="onSelect(2)" onMouseOut="offSelect(2)"> <img src="logo/ryokou_off.gif" name="imge2" border="0" width=98 height=16></a><br> <a href="mother.html" onMouseOver="onSelect(3);" onMouseOut="offSelect(3)"> <img src="logo/recipe_off.gif" name="imge3" border="0" width=98 height=16></a><br>
 
 
©1997-2008 Kikuchi-san's workshop All rights reserved //