ウェブデザイン制作/ウェブ・ポジショニングのウェブZYCO'S [ onMouseで説明表示するscript ]

オンマウスで説明表示するスクリプト

ウェブ制作の観点で「オンマウスで説明表示」するスクリプトのまとめである。親切なウェブを演出してくれてアクセントにもなるが、どこに設置しても大丈夫なスクリプトは少ない。

7 February,2006

onMouse Message 1...overLIB

さて、本ウェブでは過去に「onMouseで説明表示」というページを掲載、特にイメージマップを使ったインフォメーション(MAP案内) は特に有効で、素晴らしいナビゲーション役を務めてくれるので大のお気に入りである。

そこで、再び本ウェブでも使いたいと思い作業を始めたのだが、本ウェブのレイアウト変更でポップアップする表示位置が大幅にずれてしまうトラブルに陥った。

divの入れ子やfloatあたりが関連しているようだ。そこで、気分転換にあちこちを見て回ったのだが、いくつかのスクリプトを見つけて試してみると同様の現象が起きてしまう。そこで原点回帰で本家のウェブを求めるとどうやら別バージョンのスクリプトが存在することが分かったので、簡単な検証を済まして今ここで使っているという次第だ。

以下イメージにマウスポインタをあてるとポップアップの説明が開くようになっている。

Information map

このスクリプトは"overLIB"という。
ダウンロードしたJavaScriptの"DEFAULT CONFIGURATION"をカスタマイズすることで快適なデザインに変更できる。機能はシンプルだ。作者が陥ったようなトラブルを回避できることが最大の利点になる。

上とは違ったデザイン構成のサンプルを以下に提示しよう。どうだ!

クレジットで決済の...
代金引換の場合、配送料金代引手数料 が必要になります。
銀行より振込みの場合は...

■スクリプトのDOWNLOAD
※link : overLIB

onMouse Message 2...Tip Message

二番目に登場するのが、実は上のマップイメージをクリックすると開くインフォメーションで動いているスクリプトである。これがトラぶったのだが、何とかして使いたい。

ページのトップへ


文字の大きさについて 文字の大きさは、ブラウザで調節して下さい。
当サイトへのリンクは自由に行えます。