疑問
マウスが乗ると画像やリンクを表示する
処理
JavaスクリプトとCSS（DHTML）を使用して行います。
先に表示させる部分を指定します。要素を指定し-
スタイルの編集ダイアログのクラスやIDによるスタイルの設定でIDを指定します。（ここではhidden_blockと名付けます）そのままをクリックしスタイルの設定ダイアログのタブの属性で見え方の「不可視」にチェックを入れます。
次にマウスを乗せる部分を指定し-
イベントの編集ダイアログののイベントは「OnMouseOver」、アクションはオブジェクトツリーの「オブジェクトを表示します」を選択しダブルクリックするとパラメータの指定が表示されるのでパラメータで先に指定したID（hidden_block）を選びます。
表示させておくだけならばこのままで結構ですがマススアクションに応じて不可視に戻す場合はアクションを発生させたい要素を指定しイベントの編集のイベントはOnMouseOutなど、アクションはオブジェクトツリーの「オブジェクトを隠します」を選択して設定します。
※ブラウザによっては効果そのものが無効のものもあります。
スクリプト
OnMouseOutも設定した場合
<head></head>間に記述します。
<script language="JavaScript">
<!--HPB_SCRIPT_CODE_40
function _HpbShowObj(lId)
{
var ob;ob=new Array;
var appVer=parseInt(navigator.appVersion);
var isNC=false,isN6=false,isIE=false;
if (document.all && appVer >= 4) isIE=true; else
if (document.getElementById && appVer > 4) isN6=true; else
if (document.layers && appVer >= 4) isNC=true;
if (isNC)
{
w_str = "document." + lId;ob[lId] = eval(w_str);
if (!ob[lId]) ob[lId] = _HpbFindHiddenObj(document, lId);
if (ob[lId]) ob[lId].visibility = "show";
}
if (isN6)
{
ob[lId] = document.getElementById(lId);
ob[lId].style.visibility = "visible";
}
if (isIE)
{
w_str = "document.all.item(\"" + lId + "\").style";ob[lId] = eval(w_str);
ob[lId].visibility = "visible";
}
}
function _HpbFindHiddenObj(doc, lId)
{
for (var i=0; i < doc.layers.length; i++)
{
var w_str = "doc.layers[i].document." + lId;
var obj;obj=new Array;
obj[lId] = eval(w_str);
if (!obj[lId]) obj[lId] = _HpbFindHiddenObj(doc.layers[i], lId);
if (obj[lId]) return obj[lId];
}
return null;
}
//-->
</script><script language="JavaScript">
<!--HPB_SCRIPT_CODE_40
function _HpbHideObj(lId)
{
var ob;ob=new Array;
var appVer=parseInt(navigator.appVersion);
var isNC=false,isN6=false,isIE=false;
if (document.all && appVer >= 4) isIE=true; else
if (document.getElementById && appVer > 4) isN6=true; else
if (document.layers && appVer >= 4) isNC=true;
if (isNC)
{
w_str = "document." + lId;ob[lId] = eval(w_str);
if (!ob[lId]) ob[lId] = _HpbFindShownObj(document, lId);
if (ob[lId]) ob[lId].visibility = "hide";
}
if (isN6)
{
ob[lId] = document.getElementById(lId);
ob[lId].style.visibility = "hidden";
}
if (isIE)
{
w_str = "document.all.item(\"" + lId + "\").style";ob[lId] = eval(w_str);
ob[lId].visibility = "hidden";
}
}
function _HpbFindShownObj(doc, lId)
{
for (var i=0; i < doc.layers.length; i++)
{
var w_str = "doc.layers[i].document." + lId;
var obj;obj=new Array;
obj[lId] = eval(w_str);
if (!obj[lId]) obj[lId] = _HpbFindShownObj(doc.layers[i], lId);
if (obj[lId]) return obj[lId];
}
return null;
}
//-->
</script>
スタイル
<style type="text/css">
<!--
#hidden_block{
visibility : hidden;
}
-->
</style>
要素・スタイル
ここでは<p></p>を使っています。
<p onmouseover="_HpbShowObj('hidden_block');">ここにカーソルを乗せると</p>
<p id="hidden_block" onmouseout="_HpbHideObj('hidden_block');">こちらが表示されます。<a href="#">リンク</a>を設定しておく事も可能です。</p>
サンプル
ここにカーソルを乗せると