ダリの雑記：WEBプログラム版

システムを作っている時、機能についての説明を表示したい。でもページに表示するとうっとおしい。
てなことで、「ヘルプ」にマウスオーバーした時にバルーンを表示させる方法を覚書ます。

一番簡単なのはこちら→Balloon tooltip

ただ、これだと画像を入れたり、あまり多くの文字を入れられなさそうな感じがしたので作ってみました。
要はあらかじめ「display:none;」にしてあるブロックをマウスオーバーで表示させればよいわけです。
プラスして今回はカーソルにバルーンが付いてくるようにしました。

<script>

//ブラウザ判定用
function browser(){
    if(navigator.userAgent.indexOf("Opera") != -1){
        type = "Opera";
    }else if(navigator.userAgent.indexOf("MSIE")!=-1 
    && navigator.userAgent.indexOf("Trident/4.0")!=-1){
        type = "MSIE8";
    }else if(navigator.userAgent.indexOf("MSIE") != -1){
        type = "MSIE";
    }else if(navigator.userAgent.indexOf("Firefox") != -1){
        type = "Firefox";
    }else if(navigator.userAgent.indexOf("Netscape") != -1){
        type = "Netscape";
    }else if(navigator.userAgent.indexOf("Safari") != -1){
        type = "Safari";
    }else{
        type = "none"; 
    }
    return type;
}

//バルーンブロック表示用
function balloon_showblock(Target, TopPos, LeftPos){
    if(browser() == "MSIE"){
        document.onmousemove = iMouseIE;
    }else if(browser() == "MSIE8"){
        document.onmousemove = iMouseIE8;
    }else{
        document.onmousemove = iMouseFirefox;
    }

    function iMouseFirefox(evt){
        Xpos = evt.pageX-LeftPos;
        Ypos = evt.pageY-TopPos;
        document.getElementById(Target).style.top = Ypos+"px";
        document.getElementById(Target).style.left = Xpos+"px";
    }

    function iMouseIE(){
        Xpos = event.x+(document.body.scrollLeft || document.documentElement.scrollLeft)-LeftPos;
        Ypos = event.y+(document.body.scrollTop || document.documentElement.scrollTop)-TopPos;
        document.getElementById(Target).style.top = Ypos+"px";
        document.getElementById(Target).style.left = Xpos+"px";
    }

    function iMouseIE8(){
        Xpos = event.x-LeftPos;
        Ypos = event.y-TopPos;
        document.getElementById(Target).style.top = Ypos+"px";
        document.getElementById(Target).style.left = Xpos+"px";
    }

    document.getElementById(Target).style.display = "";
}

//バルーンブロック非表示用
function hide_block(Target){
    document.getElementById(Target).style.display = "none";
}

</script>

<div id="hoge5" style="position:absolute; display:none;">Javascriptでバルーン表示します。</div>

<p><a href="javascript:void(0)" onmouseover="balloon_showblock('hoge5', 30, 30)" onmouseout="hide_block('hoge5')">ヘルプ</a></p>

Javascriptの関数から説明いたしますと
・function browser()
　ブラウザ判定用。
　アクセスしてきたブラウザがIE、FF、Opera、Netscape、Safariのどれか判定します。

・function balloon_showblock(Target, TopPos, LeftPos)
　バルーンを表示に切り替え、カーソルに追随させる。以下引数の説明。
　Target：バルーンとなるブロックのID。
　TopPos：上下の調整（px）。
　LeftPos：左右の調整（px）。

・function hide_block(Target)
 バルーンを非表示に切り換える。
 Target：バルーンとなるブロックのID。

ここでなぜ、わざわざブラウザを判定しなければならないかと言うと、IEとFFでは位置の取得方法が違うからです。今回はカーソルにバルーンが付いてくる設定にしてますのでブラウザによってプログラムを切り替える必要がありました。

バルーンとなるブロックには「Javascriptでバルーン表示します。」という説明を入れ、idを「hoge5」にしました。またあらかじめ非表示にするためstyleに「display:none;」を、さらに他のレイアウトに影響を与えなくするため「position:absolute;」を記述しています。

バルーンの表示スイッチとなる「ヘルプ」のリンクタグには
・onmouseover="balloon_showblock('hoge5', -30, -30)"
・onmouseout="hide_block('hoge5')"
を記述します。

■サンプル　[新しいウィンドウで開く]　※サンプルは上記のソースに少し手を加えています。