お手軽にtooltipsを実現するjavascript「GoodLookingTooltips」

このエントリーを含むはてなブックマーク はてなブックマークを見るこの記事をクリップ! コメントを見るYahoo!ブックマークに登録 このエントリーをdel.icio.usに追加するこのページを行き先登録 このページをniftyクリップに登録このページをBuzzurlに登録

ユーザビリティ向上のためリンク先を説明するような、いわゆるツールチップが求められることがあります。
Robert's talkで公開しているGood Looking Tooltipsはjavascriptライブラリを使用しないscript一つのお手軽なtooltipです。
glt

使用方法
Good Looking Tooltipsglt.jsrounded-top.gifrounded-bottom.gifをダウンロードします。
glt.jsの9、10行目にあるイメージパスを上記2つの画像のパスに合わせます。
head内に以下のscriptとCSSを加え、リンクにtitle属性を付与すれば完成です。
<script src="http://yourdomain/glt.js" type="text/javascript"></script>
<style>
.glt-elm{
position: absolute;
left: 0;
top: 0;
width: 150px;
color: #fff;
opacity: 0.9;
visibility: hidden;
}
.glt-elm p{
background: #666;
margin: 0;
padding-left: 0.5em;
}
.glt-elm img{
display: block;
}
.glt-elm{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
</style>

なお、サイト内で使用しているのはリンクなどに吹き出し説明を加えるtooltip「FancyTooltips」です。
お手軽にtooltipsを実現するjavascript「GoodLookingTooltips」サンプル

2007年08月19日

前の記事:テキストに影をつけるjavascript「text drop shodow」
次の記事:ページ内リンク先に滑らかにスクロールするjavascript「SmoothScroll」

関連記事

コメント投稿











お手軽にtooltipsを実現するjavascript「GoodLookingTooltips」に関するコメントはまだありません。
ご遠慮なくコメントしてください。

この記事へのトラックバック:

過去の記事

rss

ページトップに戻る