美容・健康・ファッション・インテリア・DVD・お花・ギフト 安全安心のお買い物

町工場ネット トップ  ◇サイトマップ ◇新規登録 ◇プライバシーポリシー ◇相互リンクの方法 ◇問い合わせ

町工場 | 総合 | 美容 | ファッション | インテリア | 家電 | 資格| 食料 | 個人開業 | 書籍 | ギフト | ホビー | CD・DVD

←前ページ トップページ 内容一覧 次ページ→
■ツールチップを表示する
リンクの文字列にマウスをのせると説明やその他いろいろ表示します。
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>の直後に書きます。
二番目は普通にページの必要なところにかきます。
三番目はできるだけ2番目に近いところに書いておきましょう。ホームページビルダーなどの編集画面ではページ上に表示されますが、プレビューするとかくれます。

ページに表示されないからといってたくさん画像を埋め込むのはやめましょう。表示されなくても読み込み時間は必要ですので、ページサイズはかわりません。いや、ちょっと早いかもしれません。

←前ページ トップページ 内容一覧 次ページ→