【応用編】ツールチップNo2

ツールチップNo1はスタイルシートでデザイン可能にしましたが、
今度は透過PNGを使ったツールチップにしましょう。
色彩感、立体感、透明感など、より一層デザインにこだわった
ツールチップにできます。

【jQuery】
<script type=”text/javascript”>
$(function(){
 //初期はツールチップを非表示にする
 $(“p.tooltip”).hide();

 //マウスカーソルが当たった時、ツールチップを表示させる
 $(“a”).mouseover(function(){
  $(“p.tooltip”).show().css({
   ”top”:$(this).offset().top-20+”px”,
   ”left”:$(this).offset().left+$(this).width()+10+”px”
  });
 //マウスカーソルが離れた時、ツールチップを非表示にする
 }).mouseout(function(){
  setTimeout(function(){
   $(“p.tooltip”).hide();
  },2000);
 });
});
</script>

【HTML】
<h1>織田信長について</h1>
<div>尾張国古渡城主<a href=”#”>織田信秀</a><p>本姓は自称平氏・・・</p>
の嫡男として生まれ[6]、幼少時に那古屋城主となっている。・・・div>

 ツールチップサンプル

This entry was written by admin , posted on 火曜日 6月 14 2011at 12:06 pm , filed under 応用例 and tagged , . Bookmark the permalink . Post a comment below or leave a trackback: Trackback URL.

コメントを残す

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>