リンクにマウスオーバーした際にプチ情報を表示させてみる

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

リンクにマウスオーバーした際にプチ情報を表示させてみる

サンプル画像

 

申し訳ございません。
この記事の全文は当サイトからのシリウス購入者のみ閲覧可能となっております。

今回のカスタマイズは、リンクにマウスを載せたときに(マウスオーバーとも言います)
様々なプチ情報を表示させてそのリンクがどんなものかを事前にわからせてあげるというものです。

 

一般的には『ツールチップ』と呼ばれているものです。

 

こんな経験ないですか?

『リンクをクリックしたらページがリンク先のものに変わっちゃってさぁ。ホントは前のページはそのまま残してリンク先は新しく開きたかったんだよねぇ。』

 

クリックした先を新しいタブ(ウインドウ)で見たかったのに同じページ内で切り替わってしまった時ってすごいストレスがたまりませんか。

 

これが前もってわかっていれば……。

 

もちろん右クリックで「別タブで開く(新規ウインドウで開く)」を選べば事は解決する話なんですが、それを知ってる人がどれだけいるかってことですよ。

 

こういったことをツールチップでさりげなく教えてあげると
無意識のうちに『訪問者に優しいサイト』を印象付けられます。

 

もちろん上の例だけではありません。
たとえば当サイト最上部のヘッダー画像にマウスを乗せると「トップページに戻ります」というツールチップが表示されるようになっています。

 

ちなみにこのリンクにマウスを乗せると「これがツールチップ」というテキストが表示されます。

 

この手のものは数多く存在しますが、
当サイトで使っているのはシンプルかつ簡単に応用のきくものです。

 

またこの方法は基本的にテキストでの表示であり、リンクごとに内容を変えられるので、
例えば「最安値はコチラ!」とか「入荷日予定は○日」「裏情報も満載!」といった
別の表現に変えることもできます。

 

背景色や枠の大きさも自由に変更できます。(CSS の知識が多少必要になりますけど)

 

申し訳ございません。
この記事の全文は当サイトからのシリウス購入者のみ閲覧可能となっております。

購入ページへ


TOPへ戻る