本日  昨日
 
03/16(Sun) 03:12

o メニューにマウスがあたるとヘルプを表示する(1)-位置固定
メニューにマウスがあたるとヘルプを表示するスクリプトです。下のメニューにマウスをあてるとヘルプが表示されます。このサンプルでは文字アンカーですが画像アンカーでも同じようにできます。


クッキー入門

BGM/音声の挨拶(1)

ドキュメント情報

(注)IE3.02、NN3.01ではエラーにはなりませんが、メニューメッセージの表示は無視されます。


設置方法
使用するCross-Browser functionmenuHelp
スタイルシートなし

ヘッダー部に以下の関数を定義します。

  1. hlp[i]にヘルプメッセージを記述します。
  2. スクリプト内の変数、bg(レイヤー背景色)、cha(文字色)、sp(文字ポイント数)、wid(レイヤー幅)はあなたの環境に合わせて変更することが出来ます。
<SCRIPT Language="JavaScript"> <!-- /*-------------------------------------------------------------------- Dynamic HTML cross-browser for NC4.0 and IE4.0 (1999.01) by「菊池さん」<http://kikuchisan.net/> --------------------------------------------------------------------*/ var hlp=new Array(); hlp[0]="菊池さんちの家族のプロフィールです"; hlp[1]="わが家のパソコンとソフトの紹介です"; hlp[2]="気ままな夫婦の海外旅行記です"; var bg="cyan"; var cha="black"; var sp="10pt"; var sn="3"; var wid="110"; function menuHelp(layName,num,types){ if (document.all) { //IE4,5,6,Opera6用 document.all(layName).innerHTML = '<SPAN STYLE="width:'+wid+'; font-size:'+sp+'; color:' +cha+'; background:'+bg+'">' + hlp[num] + '</SPAN>'; document.all(layName).style.visibility = types; } if (document.getElementById) { //NN6,7用 document.getElementById(layName).innerHTML = '<SPAN STYLE="width:'+wid+'; font-size:'+sp+'; color:' +cha+'; background:'+bg+'">' + hlp[num] + '</SPAN>'; document.getElementById(layName).style.visibility = types; } if (document.layers){ //NN4用 var h=hlp[num].fontsize(sn); document.layers[layName].bgColor=bg; document.layers[layName].fgColor=cha; document.layers[layName].visibility = types; document.layers[layName].document.open(); document.layers[layName].document.write(h); document.layers[layName].document.close(); } } //--> </SCRIPT>


ボディ部に以下の記述をします。

変更する箇所は以下のとおりです。あなたのページに合わせて変更して下さい。
  1. <A HREF=>タグのURLにはマウスクリックした時のジャンプ先を指定します。
  2. menuHelpのパラメータmenu0は「span id=」「layer name=」の名前(menu0)と対応しています。
  3. 次のパラメータ「0」は、hlp[0]に対応します。例えば、「2」に指定すればhlp[2]の内容を表示します。
  4. 3番目のパラメータは、onMouseoverには「visible」を、onMouseoutには「hidden」を指定します。
<DIV><span id="menu0"><layer name="menu0"></layer></span><BR> <A HREF="../ubu.html" onMouseover=menuHelp("menu0",0,"visible") onMouseout=menuHelp("menu0",0,"hidden")><b>プロフィール</b></A></DIV> <DIV><span id="menu1"><layer name="menu1"></layer></span><BR> <A HREF="../ubu.html#pc" onMouseover=menuHelp("menu1",1,"visible") onMouseout=menuHelp("menu1",1,"hidden")><b>パソコン紹介</b></A></DIV> <DIV><span id="menu2"><layer name="menu2"></layer></span><BR> <A HREF="../father.html" onMouseover=menuHelp("menu2",2,"visible") onMouseout=menuHelp("menu2",2,"hidden")><b>海外旅行記</b></A></DIV>

 
 
©1997- Kikuchisan's workshop All rights reserved //

スポンサーリンク

関連コンテンツ