|
|
|
09/19(Thu) 08:07
 メニューにマウスがあたるとヘルプを表示する(２)-任意位置表示
メニューにマウスがあたるとヘルプを表示するスクリプトです。下のメニューにマウスをあてるとマウスポインターの右にヘルプが任意の指定した場所に表示されます。このサンプルでは文字アンカーですが画像アンカーでも同じようにできます。
(注)NN6、NN7はevent.x、event.yをサポートしてないので絶対指定にしてください。
イベント命令を使用しているので、IE3.02、NN3.01ではエラーになりますので、判定ルーチンを追加しています。
■設置方法
| 使用するCross-Browser function | menuHelp2 |
| スタイルシート | tagpos |
■ヘッダー部に以下の関数を定義します。
スタイルシートの内容をあなたの環境に合わせて変更して下さい。
- font-size:10pt----文字の大きさ
- width:120----レイヤー幅
- padding-left:5px;padding-top:5px----レイヤー内の左、上の余白
- clip:rect(0 125 35 0)----レイヤーの大きさ。右、下余白の確保に使います。
- color:navy----文字色
- background-color:cyan;layer-background-color:cyan----レイヤー背景色。NC4では layer-background-color:cyan を指定しないと文字上のみの背景色になります。
|
<![CDATA[
<STYLE TYPE="text/css">
<!--
/*--------------------------------------------------------------------
Dynamic HTML cross-browser for NC4.0 and IE4.0 (1999.01)
by「菊池さん」<http://kikuchisan.net/>
--------------------------------------------------------------------*/
.tagpos { position:absolute;visibility:hidden;font-size:10pt;width:120;
padding-left:5px;padding-top:5px;clip:rect(0 125 35 0);
color:navy;background-color:cyan;layer-background-color:cyan }
-->
</STYLE>
<SCRIPT Language="JavaScript">
<!--
function menuHelp2(layName,types,x,y)
{
if (document.all) //IE4,5,6,Opera6用
{
document.all(layName).style.pixelLeft = x;
document.all(layName).style.pixelTop = y;
document.all(layName).style.visibility = types;
}
if (document.getElementById) //NN6,7用
{
document.getElementById(layName).style.left = x;
document.getElementById(layName).style.top = y;
document.getElementById(layName).style.visibility = types;
}
if (document.layers) //NN4用
{
document.layers[layName].x = x;
document.layers[layName].y = y;
document.layers[layName].visibility = types;
}
}
// -->
</SCRIPT>
]]>
|
■ボディ部に以下の記述をします。
変更する箇所は以下のとおりです。あなたのページに合わせて変更して下さい。
- <A HREF=>タグのURLにはマウスクリックした時のジャンプ先を指定します。
- menuHelp2のパラメータtag1は「DIV CLASS="tagpos" ID="tag1"」の名前(tag1)と対応しています。
- 2番目のパラメータは、onMouseoverには「visible」を、onMouseoutには「hidden」を指定します。
- 3、4番目のパラメータは、レイヤーの表示位置です。
(1)onMouseover=では「絶対位置指定」、「マウスポインタからの相対位置指定」ができます。
(2)「event.x」「event.y」と書くと現在のマウスポインタの位置になります。
(3)サンプルの意味は下のようになります。
- 10,event.y-50---x=左端から10px(絶対位置)、y=マウスポインタより上50px(相対位置)
- event.x+150,event.y---マウスポインタよりx=右150px(相対位置)、y=0px(相対位置)
- event.x+50,event.y+150---マウスポインタよりx=右50px(相対位置)、y=下150px(相対位置)
(4)onMouseout=は「0」「0」固定です。
- メニュー位置が画面外の場合の注意点
NNとIEとのenent命令の仕様の違いで、メニュー位置が画面外の場合、IEでは期待した位置にヘルプ表示されません。
- NNはevent(マウスポインタがメニューに触れた位置)からの相対位置に
- IEはこの処理が働きません。
下記のように絶対位置指定でご利用ください。(画面内でも絶対位置指定は可能です)
onMouseover="menuHelp2(\'tag1\',\'visible\',10,600)"
|
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!--
//--DHTML対応ブラウザの判定
if(document.all || document.getElementById || document.layers){
var DOC=''
DOC+='<A HREF="../ubu.html" onMouseover="menuHelp2(\'tag1\',\'visible\',10,event.y-50)"'
DOC+=' onMouseout="menuHelp2(\'tag1\',\'hidden\',0,0)"><b>フロフール</b></A><br>'
DOC+='<A HREF="../ubu.html#pc"'
DOC+=' onMouseover="menuHelp2(\'tag2\',\'visible\',event.x+150,event.y)"'
DOC+=' onMouseout="menuHelp2(\'tag2\',\'hidden\',0,0)"><b>パソコン紹介</b></A><br>'
DOC+='<A HREF="../father.html"'
DOC+=' onMouseover="menuHelp2(\'tag3\',\'visible\',event.x+50,event.y+150)"'
DOC+=' onMouseout="menuHelp2(\'tag3\',\'hidden\',0,0)"><b>海外旅行記</b></A><br>'
DOC+='<DIV CLASS="tagpos" ID="tag1">菊池さんちの家族の<br>プロフィールです。</DIV>'
DOC+='<DIV CLASS="tagpos" ID="tag2">わが家のパソコンと<br>ソフトの紹介です。</DIV>'
DOC+='<DIV CLASS="tagpos" ID="tag3">気ままな夫婦の海外旅行記。</DIV>'
document.write(DOC)
} else {
var DOC=''
DOC+='<A HREF="../ubu.html"><b>フロフール</b></A><br>'
DOC+='<A HREF="../ubu.html#pc"><b>パソコン紹介</b></A><br>'
DOC+='<A HREF="../father.html"><b>海外旅行記</b></A><br>'
document.write(DOC)
}
//-->
</SCRIPT>
]]>
|
|
|
