【ハウツー】ゼロからはじめるThe Yahoo! UI Library - Tooltip編 (4) ツールチップにエフェクトや画像を適用する | パソコン

【ハウツー】

ゼロからはじめるThe Yahoo! UI Library - Tooltip編

4 ツールチップにエフェクトや画像を適用する

古籏一浩　 [2007/11/15]

印刷

先頭
前へ
- 1
- 2
- 3
- 4
- ／4

ツールチップにエフェクトを適用する

Yahoo! UI Libraryのツールチップは表示する際にフェードエフェクト処理を指定ができます。エフェクトにはeffectオプションでYAHOO.widget.ContainerEffect.FADEを指定します。エフェクトの実行時間はduration:で指定します。durationで指定する値は秒数になります。エフェクトはツールチップの表示される時と消える時に自動的に適用されます。ただし、マウスオーバー/アウトのタイミングが悪いと、次にツールチップが表示されるまでに時間がかかったり、表示されなくなることがあります。サンプル05ではマウスオーバー/アウト時にツールチップを0.5秒でフェードさせています。

サンプル05の実行結果。フェードエフェクト処理が行われる

サンプル05

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>YUIツールチップサンプル</title>
        <link rel="stylesheet" type="text/css" href="css/container.css"> 
        <script type="text/javascript" src="js/yahoo-dom-event.js"></script> 
        <script type="text/javascript" src="js/animation.js"></script> 
        <script type="text/javascript" src="js/container.js"></script> 
        <script type="text/javascript"><!--
            window.onload = function() {
                var tipObj = new YAHOO.widget.Tooltip("tip01", {
                    context : [ "context1", "context2" ],
                    showDelay : 0,
                    effect : { effect:YAHOO.widget.ContainerEffect.FADE, duration : 0.5 }
                } );
            }
        // --></script>
    </head>
    <body>
    <h1>YUIツールチップサンプル</h1>
    <div>
        <a href="http://www.google.co.jp/" id="context1" title="世界最大の検索サイト">グーグル</a><br>
        <a href="http://www.yahoo.co.jp/" id="context2" title="日本で最も利用されている検索サイト">ヤフー</a><br>
    </div>
    </body>
</html>

ツールチップに画像を表示する

サンプル06はFirefoxでしか動作しませんが、マウスオーバー時に自動的にリンク先を判断し、対応するアイコンをツールチップ上に表示します。


サンプル06の実行結果	対応するアイコンが表示される

Yahoo! UI Libraryのツールチップは他のツールチップライブラリより細かな指定が可能になっています。Yahoo! UI Libraryを使ってサイトを構築している場合には、補助機能としてうまく利用すると良いでしょう。

サンプル06

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>YUIツールチップサンプル</title>
        <link rel="stylesheet" type="text/css" href="css/container.css"> 
        <script type="text/javascript" src="js/yahoo-dom-event.js"></script> 
        <script type="text/javascript" src="js/animation.js"></script> 
        <script type="text/javascript" src="js/container.js"></script> 
        <script type="text/javascript"><!--
            window.onload = function() {
                var tipObj = new YAHOO.widget.Tooltip("tip01", {
                    context : [ "context1", "context2" ],
                    showDelay : 0
                } );
                tipObj.onContextMouseOver = function(){
                    var imgURL = "images/y.gif";
                    if (this.href.indexOf("google") > -1) imgURL = "images/G.gif";
                    tipObj._tempTitle = "<img src='"+imgURL+"' width='32' heigh='32'>" + "<br>"+this.href;
                }
            }
        // --></script>
    </head>
    <body>
    <h1>YUIツールチップサンプル</h1>
    <div>
        <a href="http://www.google.co.jp/" id="context1" title="世界最大の検索サイト">グーグル</a><br>
        <a href="http://www.yahoo.co.jp/" id="context2" title="日本で最も利用されている検索サイト">ヤフー</a><br>
    </div>
    </body>
</html>