|
|
|
03/16(Sun) 03:12
 メニューにマウスがあたるとヘルプを表示する(１)-位置固定
メニューにマウスがあたるとヘルプを表示するスクリプトです。下のメニューにマウスをあてるとヘルプが表示されます。このサンプルでは文字アンカーですが画像アンカーでも同じようにできます。
(注)IE3.02、NN3.01ではエラーにはなりませんが、メニューメッセージの表示は無視されます。
■設置方法
| 使用するCross-Browser function | menuHelp |
| スタイルシート | なし |
■ヘッダー部に以下の関数を定義します。
- hlp[i]にヘルプメッセージを記述します。
- スクリプト内の変数、bg(レイヤー背景色)、cha(文字色)、sp(文字ポイント数)、wid(レイヤー幅)はあなたの環境に合わせて変更することが出来ます。
|
<![CDATA[
<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>
]]>
|
■ボディ部に以下の記述をします。
変更する箇所は以下のとおりです。あなたのページに合わせて変更して下さい。
- <A HREF=>タグのURLにはマウスクリックした時のジャンプ先を指定します。
- menuHelpのパラメータmenu0は「span id=」「layer name=」の名前(menu0)と対応しています。
- 次のパラメータ「0」は、hlp[0]に対応します。例えば、「2」に指定すればhlp[2]の内容を表示します。
- 3番目のパラメータは、onMouseoverには「visible」を、onMouseoutには「hidden」を指定します。
|
<![CDATA[
<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>
]]>
|
|
|
