|
|
03/16(Sun) 19:18
 メニューにマウスがあたると画像を反転(１)
メニューの文字にマウスが当たると画像を反転させます。
下のメニューにマウスをあてて見て下さい。メニューの左にある矢印画像がグレーから赤に変化します。どのメニューが選択されたかが一目で解り親切ですね。
クッキー入門
BGM/音声の挨拶(1)
ドキュメント情報
おみくじ
■ 設置方法
- 下の関数をヘッダ部<HEAD>～</HEAD>に記述します。
- ・イメージオジェクト
- 本文<BODY>～</BODY>中の表示したい場所に以下を記述します。
- ・メニュー／画像表示
■ 下の関数をヘッダ部<HEAD>～</HEAD>に記述します。
■イメージオジェクト
- 関数Over(n)はマウスが乗った時、Out(n)は離れた時の処理をします。
- document.images["imge" + n].srcの"imge" + nは、本文中に記述される<IMG>タグで指定されたNAME="imge〇〇"に対応します。
例えば、<IMG>タグでNAME="imge01"と書いた場合は、nは01になります。
- preload内の画像img2には、マウスがメニューに乗った時に表示する画像gif/folderr.gifを指定します。
この例ではmenu.htmlと同じ場所にあるgifフォルダー内のfolderr.gifという画像を指定してます。
- 同様に、preload内の画像img1には、マウスがメニューから離れた時に表示する画像gif/folderg.gifを指定します。
この例ではmenu.htmlと同じ場所にあるgifフォルダー内のfolderg.gifという画像を指定してます。
- if (document.images)は、IE3.xxのようにイメージオブジェクトが使えないブラウザでは処理しないように判定します。
|
<![CDATA[
<SCRIPT language="JavaScript">
<!--
//画像のpreload
if (document.images)
{
img1=new Image(16,16); img1.src="gif/folderg.gif";
img2=new Image(16,16); img2.src="gif/folderr.gif";
}
//イメージオジェクト
function Over(n) {
if (document.images) {
document.images["imge" + n].src = img2.src;
}
}
function Out(n) {
if (document.images) {
document.images["imge" + n].src = img1.src;
}
}
// -->
</SCRIPT>
]]>
|
■ 本文<BODY>～</BODY>中の表示したい場所に以下を記述します。
■ メニュー／画像表示
- img src="gif/folderg.gif"のgif/folderg.gifは最初に表示される画像です。関数Out(n)で指定した画像と同じものを指定します。
- name="imge41"、name="imge42"はこの画像に付けられた固有の名前です。
(注)「imge」の名前を変えることが出来ます。この時は、Over(n)、Out(n)内の「imge」も変更するのを忘れないで下さい。
- width=16 height=16は画像サイズです。あなたの使用する画像のサイズに変更します。
- a href="ubu.html"のubu.htmlにはメニュー項目がクリックされた時のジャンプ先を記述します。この例では、メニューがクリックされるとmenu.htmlと同じ場所にあるubu.htmlにジャンプします。
- onMouseOver="Over(41)"、onMouseOut="Out(41)"はそれぞれマウスが乗った時、離れた時の処理をします。
数字41はname="imge41"に対応して、それぞれOver(41)、Out(41)と同じにします。
- プロフィル、パソコン紹介はメニュー項目です。あなたのメニュー項目に合わせて変更します。
- メニュー項目を追加する時は、記述例の１行単位で追加し、name="imge41"の41をダブらない様にします。
メニューの記述例(上のサンプルの最初の２行です）
|
<![CDATA[
<img src="gif/folderg.gif" name="imge41" width=16 height=16 align="top">
<a href="ubu.html" onMouseOver="Over(41)" onMouseOut="Out(41)">プロフィル</a><br>
<img src="gif/folderg.gif" name="imge42" width=16 height=16 align="top">
<a href="ubu.html#pc" onMouseOver="Over(42)" onMouseOut="Out(42)">パソコン紹介</a><br>
・
・
・
]]>
|
|
|
ホーム 
スクローラ(1) 
戻る