|
|
|
11/22(Fri) 03:48
 メニュー画像反転(２)＋ヘルプ表示(２)
メニュー画像反転(２)にヘルプ表示(２)を組み合わせたものです。メニュー画像にマウスが当たると画像を反転表示します。同時にマウスポインターの右にヘルプが任意の指定した場所に表示されます。
それぞれの設置方法解説はメニュー画像反転(２)、ヘルプ表示(２)の解説ページを参照してください。
■設置方法
■ヘッダー部に以下の関数を定義します。
ヘルプ表示(２)のサンプルより.tagposの設定を最小限の設定に変更しています。
|
<![CDATA[
<STYLE TYPE="text/css">
<!--
/*--------------------------------------------------------------------
Dynamic HTML cross-browser for NC4.0 and IE4.0 (2000.03)
by「菊池さん」<http://kikuchisan.net/>
--------------------------------------------------------------------*/
.tagpos { position:absolute;visibility:hidden }
-->
</STYLE>
<SCRIPT Language="JavaScript">
<!--
//ヘルプ表示(2)
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;
}
}
//画像反転(2)
//画像のpreload
if (document.images) {
var dir = "../java/logo/"; //画像のパス
var onimg = new Array("profile_on.gif", "pc_on.gif", "ryokou_on.gif")
var offimg = new Array("profile_off.gif","pc_off.gif","ryokou_off.gif")
var onsel = new Array();
var offsel = new Array();
for (i = 0; i < onimg.length; i++) {
onsel[i] = new Image(); offsel[i] = new Image();
onsel[i].src = dir + onimg[i]; offsel[i].src = dir + offimg[i];
}
}
//イメージオブジェクト
function onSelect(n) {
if (document.images) {
document.images["imge" + n].src=onsel[n].src;
}
}
function offSelect(n) {
if (document.images) {
document.images["imge" + n].src=offsel[n].src;
}
}
// -->
</SCRIPT>
]]>
|
■ボディ部に以下の記述をします。
ヘルプ表示(２)のサンプルは任意位置表示ですが、このサンプルでは(150,150)ピクセルの位置に固定表示するように変更しています。
|
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!--
//--DHTML対応ブラウザの判定
if(document.all || document.getElementById || document.layers){
var DOC='';
DOC+='<A HREF="../ubu.html"';
DOC+=' onMouseover="onSelect(0);menuHelp2(\'tag0\',\'visible\',250,230)"';
DOC+=' onMouseout="offSelect(0);menuHelp2(\'tag0\',\'hidden\',0,0)">';
DOC+='<img src="../java/logo/profile_off.gif" name="imge0"';
DOC+=' border="0" width=98 height=16></A><br>';
DOC+='<A HREF="../ubu.html#pc"';
DOC+=' onMouseover="onSelect(1);menuHelp2(\'tag1\',\'visible\',250,230)"';
DOC+=' onMouseout="offSelect(1);menuHelp2(\'tag1\',\'hidden\',0,0)">';
DOC+='<img src="../java/logo/pc_off.gif" name="imge1"';
DOC+=' border="0" width=98 height=16></A><br>';
DOC+='<A HREF="../father.html"';
DOC+=' onMouseover="onSelect(2);menuHelp2(\'tag2\',\'visible\',250,230)"';
DOC+=' onMouseout="offSelect(2);menuHelp2(\'tag2\',\'hidden\',0,0)">';
DOC+='<img src="../java/logo/ryokou_off.gif" name="imge2"';
DOC+=' border="0" width=98 height=16></A><br>';
DOC+='<DIV CLASS="tagpos" ID="tag0">菊池さんちの家族の<br>プロフィールです。</DIV>';
DOC+='<DIV CLASS="tagpos" ID="tag1">わが家のパソコンと<br>ソフトの紹介です。</DIV>';
DOC+='<DIV CLASS="tagpos" ID="tag2">気ままな夫婦の<br>海外旅行記。</DIV>';
document.write(DOC);
} else {
var DOC='';
DOC+='<A HREF="../ubu.html"><img src="../java/logo/profile_off.gif"';
DOC+=' name="imge0" border="0"';
DOC+=' width=98 height=16></A><br>';
DOC+='<A HREF="../ubu.html#pc"><img src="../java/logo/pc_off.gif"';
DOC+=' name="imge1" border="0"';
DOC+=' width=98 height=16></A><br>';
DOC+='<A HREF="../father.html"><img src="../java/logo/ryokou_off.gif"';
DOC+=' name="imge2" border="0"';
DOC+=' width=98 height=16></A><br>';
document.write(DOC);
}
//-->
</SCRIPT>
]]>
|
|
|
