チップヘルプを表示させたい。チップヘルプを表示させたい。 |
チップヘルプを表示させたい。 |  |
が未対応でした。対応させるためには
JavaScript のレイヤー機能を使用します。まず、スタイルシートでチップヘルプのスタイルを指定しておきます。
visibility の値に hidden を指定し非表示にします。のみの対応を考えれば良いので
if 文で document.layers が真の場合に動作するようにします。ポップアップ位置は、 event.x
と event.y で取得出来るので、left 及び top へ代入します。この時、マウスポインタにチップヘルプが重なってしまうのを防ぐために
16px だけ下へずらします。チップヘルプは一定時間表示したら非表示にならなければなりませんのでsetTimeout（タイマー）を設定します。また、非表示にする関数内に
clearTimeout でタイマー解除をしておきましょう。
| 対応状況 | |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
<head> <style type="text/css"> <!-- .chiphelp { position:absolute; visibility:hidden; background-color:#ffffcc; border:1px black solid; } /* チップヘルプのスタイル */ --> </style> <script type="text/JavaScript"> <!--function hChipHelp(divID) //チップヘルプを非表示にする関数
var timerID = 0; var sec = 2.5 * 1000; //チップヘルプを表示する時間。2.5秒。
function sChipHelp(divID,x,y) //チップヘルプを表示する関数
{
if (document.layers) //NN4のみ対象
{
with(document)
{
layers[divID].visibility = "visible"; //チップヘルプ表示
layers[divID].left = x; //ポップアップ位置
layers[divID].top = y + 16; //y方向にカーソル分(16px)だけずらす (^^)
}
timerID = setTimeout("hChipHelp('"+divID+"')",sec); //一定時間表示したら消す
}
}
{
if (document.layers) {
document.layers[divID].visibility = "hidden"; //チップヘルプ非表示
clearTimeout(timerID); //タイマーを解除 }
}
//-->
</script> </head>
<body>
<p><a href="#pagetop" onMouseover="sChipHelp('divChip',event.x,event.y)"
onMouseout="hChipHelp('divChip')"
title="クリックすると先頭へジャンプします。">文字だけのチップヘルプ</a></p>
<div class="chiphelp" id="divChip">クリックすると先頭へジャンプします。</div>
</body>
意外と簡単で見通しの良いソースになりました。これだけで及び以降に対応したわけです。ひとつ注意しておきたいのは、レイヤーを挿入する位置ですが、当り障りの無い位置（
div エレメントのネストとか table エレメント内が不味いようです）にしないと、の場合文字列が表示できずに小さな□になってしまいます。（画像が入っていれば
div エレメントのネストはＯＫです。）
表示
は IE と違うのは仕方ないとしても、
と 以降が異なる動作をします。
以降の場合、ページ内容がスクロールされているとスクロールした分（document.body.scrollLeft及びdocument.body.scrollTop）だけ加算してやらないとチップヘルプが正しい位置に表示されません。
の場合は、逆に加算してはいけないので、IE
のバージョンを取得してスクロール値を0にします。
| 対応状況 | |
|
|
|
|
|
|
<head> <style type="text/css"> <!-- .chiphelp { position:absolute; visibility:hidden; background-color:#ffffcc; border:1px black solid; } /* チップヘルプのスタイル */ --> </style> <script type="text/JavaScript">
<!--
timerID = 0;
sec = 2.5 * 1000; //チップヘルプを表示する時間。2.5秒。
var ver = ""+navigator.appVersion;
IEversion= -1; if (navigator.userAgent.toUpperCase().indexOf("MSIE") >= 0) //IEのバージョンを取得
{
var fno = ver.indexOf("MSIE") + 5;
ver = ver.substring(fno,99);
var fno = ver.indexOf(";");
var bno = ver.indexOf("b");
if ((bno != -1) && (bno < fno)) fno = bno;
IEversion = ver.substring(0,fno);
}
function sImgChipHelp(divID,x,y) //チップヘルプを表示する関数function hChipHelp(divID) //チップヘルプを非表示にする関数
{
var offX = offY = 0; //初期値、NN4はスクロール値0
if (document.layers) chipOBJ = document.layers[divID]; //NN4クロスブラウザ
if (document.all) chipOBJ = document.all[divID].style; //IEクロスブラウザ
if (document.all) //IE5以降のスクロール値取得
{
offX = document.body.scrollLeft;
offY = document.body.scrollTop; }
chipOBJ.visibility = "visible"; //チップヘルプ表示 /* IE4はNN4と同じ値。Mac版IE4.5は未確認のため、< 5 としてます。 */
if (IEversion >= 4 && IEversion < 5) offX = offY =0;
chipOBJ.left = x + offX; //ポップアップ位置
chipOBJ.top = y + offY + 16; //y方向にカーソル分(16px)だけずらす (^^)
timerID = setTimeout("hChipHelp('"+divID+"')",sec); //一定時間表示したら消す }
{
if (document.layers) chipOBJ = document.layers[divID];
if (document.all) chipOBJ = document.all[divID].style;
chipOBJ.visibility = "hidden"; //チップヘルプ非表示
clearTimeout(timerID); //タイマーを解除
}
//-->
</script></head>
<body>
<p><a href="#pagetop" onMouseover="sImgChipHelp('divImgChip',event.x,event.y)"
onMouseout="hChipHelp('divImgChip')">画像と文字のチップヘルプ</a></p>
<div class="chiphelp" id="divImgChip">
<img src="../img/poko.gif" width="32" height="32" border="0" alt="pokochan">
こんなん出ます。</div>
</body>
いやー、かなり強引なソースコードになりました。(^^ゞ 煩雑になってしまいあまり良いソースとは言えませんね。お勧めは何と言ってもDOM編です。
表示
こんなん出ます。
以降が未対応でした。やはり、最新ブラウザに対応しないとね。DOMとは、HTMLやXML文書の中にあるもの全てに対して、参照、変更、削除、等をプログラムからアクセスする方法を定めた仕様です。詳細は、W3Cをご覧下さい。今まではIEとNNではダイナミックHTMLの記述方法が異なりましたが（クロスブラウザーで対処してました）、がDOMに対応しましたので、ようやく同じスクリプトで記述できるようになりました。DOMによるスタイルプロパティーへのアクセス方法は、オブジェクト名.getElementById(ID名).style.プロパティー
です。
| 対応状況 | |
|
|
|
|
|
|
|
|
|
|
|
<head> <style type="text/css"> <!-- .chiphelp { position:absolute; visibility:hidden; background-color:#ffffcc; border:1px black solid; } /* チップヘルプのスタイル */ --> </style> <script type="text/JavaScript">
<!--
timerID = 0;
sec = 2.5 * 1000; //チップヘルプを表示する時間。2.5秒。
function sDomChipHelp(divID,x,y) //チップヘルプを表示する関数function hChipHelp(divID) //チップヘルプを非表示にする関数
{
var offX = offY = 0; //初期値
if (document.layers) chipOBJ = document.layers[divID]; //NN4対応
if (document.all) chipOBJ = document.all[divID].style; //IE4対応
if (document.getElementById) //DOM対応
{
chipOBJ = document.getElementById(divID).style;
if (document.all) //IE5以降のスクロール値取得
{
offX = document.body.scrollLeft;
offY = document.body.scrollTop; }
} chipOBJ.visibility = "visible"; //チップヘルプ表示 chipOBJ.left = x + offX; //ポップアップ位置
chipOBJ.top = y + offY + 16; //y方向にカーソル分(16px)だけずらす (^^)
timerID = setTimeout("hChipHelp('"+divID+"')",sec); //一定時間表示したら消す }
{
if (document.layers) chipOBJ = document.layers[divID];
if (document.all) chipOBJ = document.all[divID].style;if (document.getElementById)chipOBJ = document.getElementById(divID).style;
chipOBJ.visibility = "hidden"; //チップヘルプ非表示
clearTimeout(timerID); //タイマーを解除
}
//-->
</script></head>
<body>
<p><a href="#pagetop" onMouseover="sDomChipHelp('divDomChip',event.x,event.y)"
onMouseout="hChipHelp('divDomChip')">画像と文字のチップヘルプ</a></p>
<div class="chiphelp" id="divDomChip">
<img src="../img/poko.gif" width="32" height="32" border="0" alt="pokochan">
こんなん出ます。</div>
</body>
if 文でdocument.getElementByIdが真の場合に以降が動作するようにします。のスクロール問題はこの時に処理すれば、はDOM未対応ですのでスクロール処理されません。どうですか？かなりスッキリしましたね。ただし、はevent.xとevent.yに対応してないようでポップアップ位置が取得できません。したがって、チップヘルプの記述位置は表示させたい場所に記述して下さい。
div エレメントで括ってやると良いでしょう。
表示
こんなん出ます。
pokochan@mx1.tees.ne.jp