2009年12月11日
jQueryで作るオリジナルツールチップ
今回はリンクや画像にカーソルを載せたときに表示される「ツールチップ」作成しました。
2種類作りましたがそれぞれ作り方が違います。
1つ目はリンクの後にツールチップの内容を書きます。スクリプトを工夫することにより、リンクとツールチップを後から増やしてもスクリプトを変更しなくてもいいようにしました。ただし、Javascriptがオフの環境ではレイアウトか崩れ見た目が悪くなります。
2つ目はツールチップを最後に置いてあります。これによりJavascriptがオフの環境でもレイアウトは比較的キレイで見やすいです。ただし、ツールチップを増やすのにかなり複雑なスクリプトになる・・・と思います。
2種類作りましたがそれぞれ作り方が違います。
1つ目はリンクの後にツールチップの内容を書きます。スクリプトを工夫することにより、リンクとツールチップを後から増やしてもスクリプトを変更しなくてもいいようにしました。ただし、Javascriptがオフの環境ではレイアウトか崩れ見た目が悪くなります。
2つ目はツールチップを最後に置いてあります。これによりJavascriptがオフの環境でもレイアウトは比較的キレイで見やすいです。ただし、ツールチップを増やすのにかなり複雑なスクリプトになる・・・と思います。
ASCII.jp：透過PNG対応！jQueryでオリジナルツールチップ ｜Web制作の現場で使えるjQuery UIデザイン入門を参考にツールチップを作りました。
リンクの上にカーソルを重ねるとツールチップが表示されます。
コードは以下の通り。
リンクの上にカーソルを重ねるとツールチップが表示されます。
1つ目
サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキストリンクの説明1
リンクの説明2
リンクの説明3
リンクの説明4
リンクの説明5
リンクの説明6
サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキストリンクの説明7
リンクの説明8
リンクの説明9
リンクの説明10
リンクの説明11
リンクの説明12
サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト
2つ目
サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト
リンクの説明13
リンクの説明14
リンクの説明15
リンクの説明16
リンクの説明17
リンクの説明18
コードは以下の通り。
<style type="text/css">
#tooltip1,#tooltip2 {
width:450px;
line-height:1.2;
}
#tooltip1 span {
line-height:1.5;
color:#fff;width:200px;
background:#ff9900;
border:2px solid #fff;
padding:1em;font-size:small;
}
div.setumei {
color:#fff;
width:200px;
position:
absolute;
}
div.setumei p {
line-height:1.5;
margin:0;
font-size;small;
background:url("//img01.naganoblog.jp/usr/webdesign/tooltip_top.png") top right;
padding:10px 18px 0px 25px;
}
div.setumei img {
vertical-align:top;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#tooltip1 span").css({
opacity:"0.9",
position:"absolute",
display:"none"
});
$("#tooltip1 a").mouseover(function(){
$("+span",this).fadeIn();
}).mouseout(function(){
$("+span",this).fadeOut();
}).mousemove(function(e){
$("+span",this).css({
"top":e.pageY+10+"px",
"left":e.pageX+10+"px"
});
});
});
$(function(){
$("#tooltip2 div.setumei").css("opacity","0.9").hide();
$("#tooltip2 a").mouseover(function(){
$("#tooltip2 div.setumei").fadeIn().css({
"top":$(this).offset().top-15+"px",
"left":$(this).offset().left+$(this).width()+"px"
});
}).mouseout(function(){
$("#tooltip2 div.setumei").fadeOut();
});
})
</script>
<div id="tooltip1">
<p>サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト <a href="#">サンプルテキスト</a><span>リンクの説明1<br />リンクの説明2<br />リンクの説明3<br />リンクの説明4<br />リンクの説明5<br />リンクの説明6<br /></span> サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト <a href="#">サンプルテキスト</a><span>リンクの説明7<br />リンクの説明8<br />リンクの説明9<br />リンクの説明10<br />リンクの説明11<br />リンクの説明12<br /></span> サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト</p>
</div>
<div id="tooltip2">
<p>サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト <a href="#1">サンプルテキスト</a> サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト</p>
<div class="setumei">
<p>リンクの説明13<br />リンクの説明14<br />リンクの説明15<br />リンクの説明16<br />リンクの説明17<br />リンクの説明18<br /></p>
<img src="//img01.naganoblog.jp/usr/webdesign/tooltip_bottom.png" alt="" />
</div>
</div>
jQueryでIE6を透過PNGに対応させる
jQueryで作るロールオーバー
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
jQueryでストライプの装飾 :nth-child()
jQueryで作るロールオーバー
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
jQueryでストライプの装飾 :nth-child()
Posted by ヒダカ at 23:44│Comments(0)
│jQuery
