ツールチップでさりげなく情報を伝える
サイトの情報設計をする際,
特に,
そんなときに,
今回は,
tipsyとDD_belatedPNG.jsを準備する
今回のサンプルは以下のようなものです。
今回は,
tipsyは,
下記サイトからパッケージをダウンロードしてください。
そして,
今回は透過PNGを使用し,
フェードインの動きと透過PNGを取り入れる
動きにフェードインなどの効果をつけると,
今回は,
では,
XHTMLソース
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/tipsy.css" type="text/css" />
<script type='text/javascript' src='js/jquery-1.3.2.min.js'></script>
<script type="text/javascript" src="js/jquery.tipsy.js"></script>
<script type='text/javascript'>
$(function() {
$('.tooltip').tipsy({gravity: 'w',fade:true});
});
</script>
<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.transparent');
</script>
<![endif]-->
「style.
「jquery-1.
tipsyは,
- w・
・ ・ 右に表示 - s・
・ ・ 上に表示 - e・
・ ・ 左に表示 - n・
・ ・ 下に表示
上記のアルファベットを,
「$('.tooltip')」
最後の[if IE 6]の部分では,