KANWAKYUDAI::Blog: overLIBでツールチップ表示

2004年01月14日

overLIBでツールチップ表示

技術的な話題ですみません。
トップ画面左に”ことわざ”（Proverbs Today）を掲示していますが、マウスを重ねるとコメントを表示させるようにしています。バルーンヘルプみたいなやつですね。
これ、NASA（ケネディー宇宙センター）でも使われているツールです。
この使い方について書いておきます。
これはoverLIBというJavaで書かれたツールを利用しています。

に行ってDownload overLIB 3.51をクリックし、overlib351.zipをゲット
展開するとoverlib.jsとoverlib_mini.jsが出てくるので、適当なディレクトリにASCIIモードで転送。（私はMovable Typeをインストールしたディレクトリ直下にしました）
表示させたいページの<body></body>の間にどこでもいいから

を埋め込みます。

src="/PATH/TO/overlib.js"
はあなたの環境に合わせたoverlib.jsまでのパスに変更しておきましょう。
これだけで準備はおしまい。
普通のポップアップは以下のスクリプトを埋め込めばOK

<a href="javascript:void(0);" onmouseover="return overlib('普通のポップアップ.');" onmouseout="return nd();">テストはここにマウスを</a>

テストはここにマウスを

スティッキーポップアップ（マウスを外しても残る）の場合は

<a href="javascript:void(0);" onmouseover="return overlib('マウスを外しても残る.', STICKY);" onmouseout="return nd();">テストはここにマウスを</a>

テストはここにマウスを

クリック可能なポップアップは

<a href="javascript:void(0);" onclick="return overlib('キャプション付き。マウスの下に表示されます', STICKY, CAPTION, 'Sticky!', CENTER);" onmouseout="nd();">ここをクリック</a>

テストはここをクリック

ほかにも沢山オプションが用意されています。
バックグラウンドの画像を使う場合。
（画像までのパスなどは要修整）

<a href="javascript:void(0);" onclick="return overlib('<b>半分透過のバックグラウンド画像</b>', TEXTCOLOR, '#ffffff', TEXTSIZE, 2, WIDTH, 250, HEIGHT, 120, BACKGROUND, 'transboxblue.gif', PADX, 60, 20, PADY, 20, 20);" onmouseout="nd();">テストはここをクリック</a>

テストはここをクリック

カーソル左に追随するタイプ

<a href="javascript:void(0);" onclick="return overlib('カーソル左上を追っかける', HEIGHT, 40, LEFT, ABOVE, SNAPX, 10, SNAPY, 10);" onmouseout="nd();">テストはここをクリック</a>

テストはここをクリック

ボーダー、画像無しのタイプ

<a href="javascript:void(0);" onclick="return overlib('<b><font color=\'#FF6666\' face=\'Courier,Verdana,Arial,Helvetica\'>ボーダー画像無し</font></b>', FULLHTML);" onmouseout="nd();">テストはここをクリック</a>

テストはここをクリック

ポップアップの中にリンクのhtmlが書かれているもの

<a href="javascript:void(0);" onclick="return overlib('<a href=\'http://www.bosrup.com/web/overlib/\'>ポップアップ</a>', STICKY);" onmouseout="nd();">テストはここをクリック</a>

テストはここをクリック

どうですか？おもしろいでしょ？あなたも設置してみてください。

Posted by mugen at 2004年01月14日 02:40 | TrackBack

Trackback

Title: overLIB
Excerpt: 画像やリンク先にマウスを重ねるとコメントが出現するもの。 PHOTOGRAPHで...
From: CHICK! -MEMO-
Date: 2005.10.04

Comments

解決しました

お騒がせしました。

Posted by: ユウ at 2004年04月12日 16:44

z-indexでなんとかいけそう…なのですが。

背景（もっとも背面）
ユニット配置用レイヤー（二つの間）
地形用レイヤー（もっとも前面）
と、した場合、当然ユニットが出てきません。
しかしユニット配置の部分を前面にしますと、
したの地形用レイヤーのoverlibを作動させることができません。

そこで、ユニット用レイヤーの、あるセルだけを
一番前に押し出したいです。

つまり、背景＞ユニット用レイヤー＞地形用レイヤー＞ユニット用レイヤーのあるセルのユニットアイコン。

としたならば、ユニット以外の部分は地形用レイヤーをクリックでき、
ユニット部分だけは、そのユニットをクリックできる…

という状態を今目指して必死にやっています。
タグの中にいろいろ詰め込めそうなのではありますが…。

Posted by: ユウ at 2004年03月31日 11:46

＞ユウさん
z-indexの値をオーバラップするように変更してもダメでしょうか？

Posted by: mugen at 2004年03月31日 00:20

どうも、はじめまして。
URLのような感じで、
ポップアップを活用させてもらっています。

最近はレイヤーを組み合わせようと思ったのですが、
この場合、どのレイヤー層でポップアップを出すにしても、
最前列に出るようには、どのようなステータス設定が必要でしょうか？
レイヤーをかぶせたら、ポップアップがレイヤーの後ろ、
つまり
背景＞ポップアップ＞レイヤー。
となってしまい、見えなかったもので…。

見た目は背景＞レイヤー＞レイヤー
という形を保ちつつ、ポップアップだけは一番前に出してみたいのです。

Posted by: ユウ at 2004年03月30日 13:24

kさん
コメントありがとうございました。
誰からも反応が無かったので、少々寂しかったところです。

Posted by: mugen at 2004年03月16日 12:35

こちらの説明を元にoverLIBをつけてみました☆無事に作成できました、ありがとうございました。
故事成語を示すってのもぱくりみたいでなんか申し訳ないです・

Posted by: k at 2004年03月16日 09:07