Web制作の現場で使えるjQuery　UIデザイン入門 ― 第16回

透過PNG対応！jQueryでオリジナルツールチップ

2009年10月26日 11時00分更新

文● 西畑一馬／to-R

透過PNGで作るタイマー式のツールチップ

　3番目に紹介するのは、透過PNGを利用したツールチップです。透過PNGでは半透明の画像が作成できるため、デザイン性を重視したいときには便利ですが、いまだ利用者の多いIE6がサポートしていないため、実際の制作現場では扱いにくいのが難点です。ここでは、IE6で透過PNGを表示する方法を含めて解説します。また、このツールチップにはタイマー機能を持たせ、マウスアウト後、一定の時間が経ってから消えるようにしましょう（サンプル03）。


サンプル03の完成画面。透過PNGを利用してツールチップに影を付けている

　HTML部分は以下のようになります。ツールチップに表示する内容は、class属性「tooltip」を付けたp要素で記述します。

▼サンプル03（HTML部分）


<p class="tooltip">
    これはASCII.jpの<br />
    <strong>Web制作の現場で使えるjQuery<br />
    UIデザイン入門</strong><br />
    のサンプルプログラムです
</p>

　CSSは次のようになります。透過PNGを利用する場合は、CSSの使い方がキモです。まず、p.tooltipに対して widthやheight、marginなどを設定し、ツールチップの基本的な形を整えます。透過GIFのときと同じように、position:absolute;を指定し、backgroundプロパティで「tooltip.png」という透過PNGファイルを背景に設定します。

　すでに説明したとおり、IE6はそのままでは透過PNGを表示できないため、IE6向けにはスターハックを利用して専用のスタイルを適用します。スターハックは、セレクターの前に「* html」を付けることで、IE6以下にだけ解釈できるCSSを記述する方法です。そのほかのブラウザーではスターハックで指定されたCSSは無視されます。

　IE6では、IE独自実装のfilterプロパティを利用すれば透過PNGを表示できます。filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tooltip.png',sizingMethod='scale'); と非常に記述は長いですが、読み込む透過PNGファイル名を src='...' に記述するだけです。先に設定してある背景と画像が重ならないように、* html p.tooltipにはbackground:none;を追加してIE6以下の場合だけ背景画像を無効にしています。

▼サンプル03（CSS部分）


p.tooltip{
    margin:0;
    width:185px;
    height:86px;
    position:absolute;
    padding : 10px 20px 20px 10px;
    background:url("images/tooltip.png");
    font-size:small;
}
* html p.tooltip{
    background:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tooltip.png',sizingMethod='scale');
}

　スクリプト部分は以下のようになります。

▼サンプル03（スクリプト部分）


$(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()
        },3000)
    })
})

　サンプル02と異なる点は、mouseoutイベントの設定です。一定の時間が経過した後にツールチップを非表示にするため、JavaScriptの命令 setTimeout()を使って記述しています。setTimeout()は、function(){...}内に実行したい処理の内容を、その後ろに実行のタイミングをミリ秒単位で指定します。ここでは、3000ミリ秒後にツールチップを非表示にするように処理を追加しました。


setTimeout(function(){
    $("p.tooltip").hide()
},3000)

　以上で、透過PNGを使ったタイマー式のツールチップが完成しました。

著者：西畑一馬（にしはたかずま）

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「現場のプロから学ぶXHTML+CSS」（共著、毎日コミュニケーションズ刊）がある。

前へ 1 2 3 次へ

ツイートする

カテゴリートップへ