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

スポンサーサイト

スポンサー広告

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

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/59-48452ca9
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

Opera User JavaScriptを分からん人間が役に立たないスクリプトを書いています。

画像をマウスオーバーすると、画像情報のツールチップを出すスクリプト

画像にマウスを乗せると、画像のアドレス、タイトルをツールチップで表示する。画像の上からマウスを外すと、ツールチップを隠す。

// ==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';
    }
    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>'; 
        tooltip.style.top  = e.clientY + document.body.scrollTop + 'px';
        tooltip.style.left = e.clientX + document.body.scrollLeft + 'px';
        tooltip.style.display = '';
    }
    // ツールチップを隠す
    function hideTooltip(){
        tooltip.innerHTML='';
        tooltip.style.display = 'none';
    }
}, false);

positionプロパティが 'absolute'の場合、leftプロパティは絶対位置指定になる。eventの clientXプロパティはクライアント領域の座標だから、横にスクロールした時ずれができる。そのため、水平スクロール量を考慮する必要がある。垂直の座標も同じ。

水平スクロール量は document.body.scrollLeftだから

tooltip.style.left = e.clientX + document.body.scrollLeft + 'px'

垂直スクロール量は document.body.scrollTopだから

tooltip.style.top  = e.clientY + document.body.scrollTop + 'px';

参考にしたサイト

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/59-48452ca9
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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。