|
リンクの文字列にマウスをのせると説明やその他いろいろ表示します。
alt や text でもできますが、この方法なら画像まで表示できるので、ちょっといかしてるんじゃねーかと思ったりします。
マウスを移動させると表示も消えるようにしてありますので、長い文章でも表示できます。
ページ自体はあまりごちゃごちゃしたくないけど、説明はいれたいなんてときに使いましょう。
こっちは文字だけのツールチップ
こっちは画像と文字のツールチップ
ソースをみましょう。ややこしいので青字の部分だけ変更して使ってください。
このスクリプトの部分は何も書き換えないでください。うまく表示されなくなります。
<TITLE>チップヘルプを表示する</TITLE>
<SCRIPT language="JavaScript">
<!--
function ChipON(id_no,x,y)
{
var offX = offY = 0;
if (document.layers) chip= document.layers[id_no];
if (document.all) chip = document.all[id_no].style;
if (chip.visibility.charAt(0) == "v") return;
if (document.all)
{
offX = document.body.scrollLeft;
offY = document.body.scrollTop;
}
chip.visibility = "visible";
chip.left = x + offX;
chip.top = y + offY;
}
function ChipOFF(id_no)
{
if (document.all) document.all[id_no].style.visibility = "hidden";
if (document.layers) document.layers[id_no].visibility = "hidden";
}
// -->
</SCRIPT> |
ここが、リンク表示される文字列の指定です。
<chip01というのが書いてあります。ここの<chip01 と下の枠の<chip01 が対応しています。
同じようにchip02も対応しています。
<A href="#" onmouseover="ChipON('chip01',event.x,event.y)"
onmouseout="ChipOFF('<chip01')">こっちは文字だけのツールチップ</A><BR>
<BR>
<BR>
<A href="#" onmouseover="ChipON('chip02',event.x,event.y)"
onmouseout="ChipOFF('chip02')">こっちは画像と文字のツールチップ</A><BR> |
#をリンク先にすればジャンプします。
<DIV id="<chip01" style="position:absolute;
visibility:hidden; background-color:#ffffff; border:1px black
solid;">こんな具合に表示されます。</DIV>
<DIV id="chip02" style="position:absolute;
visibility:hidden; background-color:#ffffff; border:1px black
solid;"><IMG src="image1.jpg" width="150"
height="112" border="0"> こんな感じです。</DIV>
</BODY> |
もちろん、上野こんな感じです。を書かなければ、画像だけ表示されます。
#ffffff これはバックの色指定です。好きな色に変えてください。
image1.jpg" width="150" height="112 表示する画像ファイル名と大きさです。大きさは省略してもかまいません。
ですから、表示するものをふやすなら、chip03、chip04、chip05、・・・・・と増やしていけばいい訳です。
<DIV>から</DIV>までがワンセットです。
一番上の枠のスクリプトは</TITLE>の直後に書きます。
二番目は普通にページの必要なところにかきます。
三番目はできるだけ二番目に近いところに書いておきましょう。ホームページビルダーなどの編集画面ではページ上に表示されますが、プレビューするとかくれます。
ページに表示されないからといってたくさん画像を埋め込むのはやめましょう。表示されなくても読み込み時間は必要ですので、ページサイズはかわりません。いや、ちょっと早いかもしれません。
|
こんな感じです。