Link Information -DHTML-

Description:

リンクに触れたときに、画面の指定の場所にリンク先の情報を表示します。 表示するメッセージにはタグも使えます。

Demo:

[ Yahoo | Goo | Infoseek ]

Source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>

<!-- 表示部のスタイル定義 -->
<style type="text/css">
<!--
#linkinfolay { width:400px; margin:5px; border-width:2px; border-style:solid; border-color:#dddddd; position:relative; height:100px; padding:10px; }
//-->
</style>

<script language="JavaScript" type="text/javascript">
<!--
function linkinfo(msg, id) {
 if(!document.all && !document.getElementById) { return; }
 id = (!id)  ? "linkinfolay" : id;
 msg= (!msg) ? "" : msg;
 var el = (document.getElementById) ? document.getElementById(id) : document.all(id);
 el.innerHTML = msg;
}

//-->
</script>

</head>

<body>


<a href="http://www.yahoo.co.jp/"
     onMouseover="linkinfo('■ディレクトリ型検索エンジンYahoo!のホームページです。')"
     onMouseout="linkinfo()"
>
  Yahoo
  </a>
| <a href="http://www.goo.ne.jp/"
     onMouseover="linkinfo('<font color=\'#0000ff\'>■ロボット型検索エンジンGooのホームページです。</font>')"
     onMouseout="linkinfo()"
>
  Goo
  </a>
| <a href="http://www.infoseek.co.jp/"
     onMouseover="linkinfo('■ロボット型検索エンジンinfoseekのホームページです。')"
     onMouseout="linkinfo()"
>
  Infoseek
  </a>


<!-- メッセージ表示部分:ここの部分に情報が表示される -->
<script language="JavaScript" type="text/javascript">
<!--
 if(document.all || document.getElementById) {
  document.write("<div id='linkinfolay'>ここにリンク先の情報が表示されます。");
  document.write("<\/div>");
 }
//-->
</script>




</body>
</html>

Advice:

情報を表示したいリンクのリンクタグに onMouseover="linkinfo()" onMouseOut="linkinfo()" をそれぞれ書きます。linkinfo() の中身にはこのリンク先に関する情報やコメントを書きます。

onMouseover="linkinfo('コメント')" onMouseout="linkinfo()"

Arrangement:

Netscape4.xでも動くようにする

tableを用いてボックスのサイズを固定化し、 その中を書き換える事によって実現します。多少強引な方法ですが…。

まず、スクリプトの中の linkinfo() { .... } の中身を以下のように書き換えます。

function linkinfo(msg, id) {
 if(!document.all && !document.getElementById && !document.layers) { return; }
 id = (!id)  ? "linkinfolay" : id;
 msg= (!msg) ? "" : msg;
 if(document.layers) {
   var el = document.layers[id].layers[id+"-child"];
   el.document.open();
   el.document.write(msg);
   el.document.close();
   return;
 }
 var el = (document.getElementById) ? document.getElementById(id) : document.all(id);
 el.innerHTML = msg;
}

表示メッセージ部を、以下のように書き換えます。 なお <TD>のwidth,heightもきちんと設定を行ってください。

<script language="JavaScript" type="text/javascript">
<!--
if(document.all || document.getElementById || document.layers) {
 document.write("<table cellpadding='0' cellspacing='0' border='1'>");
 document.write("<tr>");
 document.write("<td width='400' height='100' valign='top' id='linkinfolay'>");
 document.write("<layer id='linkinfolay-child' width='390' height='90'>ここにリンク先の説明が出ます。<\/layer>");
 document.write("<\/td>");
 document.write("<\/tr>");
 document.write("<\/table>");
}
//-->
</script>

Browser:

Internet Explorer4.0以上
Netscape Navigator6.0以上