Home > スポンサー広告 > User JavaScriptの練習 - mouseoverで画像情報のツールチップの続き

スポンサーサイト

スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/60-4e24bf82
Listed below are links to weblogs that reference
スポンサーサイト from Karafuto Blog

Home > スポンサー広告 > User JavaScriptの練習 - mouseoverで画像情報のツールチップの続き

Home > user javascript > User JavaScriptの練習 - mouseoverで画像情報のツールチップの続き

User JavaScriptの練習 - mouseoverで画像情報のツールチップの続き

user javascript

マウスを乗せると表示する画像情報のツールチップの改良

User JavaScriptの練習 - mouseoverで画像情報のツールチップの続きです。

前のスクリプトでは、マウスオーバーした時画像が下のほうにあるとツールチップが下にはみ出し、切れることがある。右にある時は縦長になり不細工になる。もっとひどい時ははみ出て横スクロールバーが出ることもある。

ツールチップがはみ出さないように調整を試みた。

// ==UserScript==
// @include *
// @exclude
// ==/UserScript==

document.addEventListener('load', function() {
    var tooltip = document.createElement('div');
    with ( tooltip.style) {
        fontSize = '12px';
        padding = '4px';
        color   = 'white';
        backgroundColor = 'black';
        zIndex   = 100;
        position = 'absolute';
        border   = '1px solid white';
        opacity  = 0.7;
        display  = 'none';
        textAlign = 'left';
        width = '300px';
    }
    document.body.appendChild(tooltip);

    var nodes = document.evaluate(
        '//img',
        document,
        null,
        XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
        null);
    for ( var i=0 ; i < nodes.snapshotLength; i++ ) {
         nodes.snapshotItem(i).addEventListener('mouseover', showTooltip, false);
         nodes.snapshotItem(i).addEventListener('mouseout',  hideTooltip, false);
    }

    // ツールチップを表示
    function showTooltip(e){
        tooltip.innerHTML='<div>src: ' + e.target.src + '</div>' +
            '<div> title: ' + e.target.alt + '</div>'; 
        // ツールチップが下にはみ出していないか判定
        if ( e.clientY  < window.innerHeight - 100 ) {
            tooltip.style.top  = e.clientY + document.body.scrollTop + 'px';
        } else {
            tooltip.style.top  = window.innerHeight - 100 + document.body.scrollTop + 'px';
        }

        // ツールチップが右にはみ出していないか判定
        var tooltipWidth = parseInt( tooltip.style.width);
        if ( e.clientX + tooltipWidth < window.innerWidth - 35 ) {
            tooltip.style.left = e.clientX + document.body.scrollLeft + 'px';
        } else {
            tooltip.style.left = window.innerWidth - tooltipWidth - 35 + document.body.scrollLeft + 'px';
        }
        tooltip.style.display = '';
    }
    // ツールチップを隠す
    function hideTooltip(){
        tooltip.innerHTML='';
        tooltip.style.display = 'none';
    }
}, false);

ツールチップの長さを'300px'に固定した。

ツールチップが右にはみ出した時、ツールチップの X座標からツールチップがはみ出した長さをひき、画面に納まるようにした。

if ( e.clientX + tooltipWidth < window.innerWidth - 35 ) {
    tooltip.style.left = e.clientX + document.body.scrollLeft + 'px';
} else {
    tooltip.style.left = window.innerWidth - tooltipWidth - 35 + document.body.scrollLeft + 'px';
}

'window.innerWidth'はドキュメントの表示領域の幅。

Y座標の処理はいい加減です。ツールチップが下にはみ出した時、ツールチップの Y座標を適当に上げているだけだ。そのため長いURIだと ツールチップがはみ出す。改良できていない。ツールチップの高さを長さと同じように固定できればいいんだけれど、そうするとテキストが途中で切れてしまう。

マウスを乗せて表示された画像情報のツールチップ

Operaのホームページの画像にマウスを乗せて、画像のアドレス、タイトルのツールチップが表示されたところ。

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/60-4e24bf82
Listed below are links to weblogs that reference
User JavaScriptの練習 - mouseoverで画像情報のツールチップの続き from Karafuto Blog

Home > user javascript > User JavaScriptの練習 - mouseoverで画像情報のツールチップの続き

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。