Home > スポンサー広告 > User JavaScriptの練習 - ツールチップのようなものを表示

スポンサーサイト

スポンサー広告

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

Comments:-

Comment Form

Trackback+Pingback:-

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

Home > スポンサー広告 > User JavaScriptの練習 - ツールチップのようなものを表示

Home > user javascript > User JavaScriptの練習 - ツールチップのようなものを表示

User JavaScriptの練習 - ツールチップのようなものを表示

user javascript

Opera User JavaScriptを分からん人間が練習してます。

User JavaScriptでツールチップのようなもの(要素の上に要素を重ねている)をページ上に表示する。

クリックしたら eventオブジェクトのプロパティを表示する。'for in'をやっているだけなので、プロパティの情報がどこまで正しいかは分かりません。

Opera公式サイトの eventの情報はDOM 2 Eventにあります。

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

document.addEventListener('load', function() {
    var tooltip = document.createElement('div');
    // スタイルの指定
    with ( tooltip.style) {
        fontSize = '14px';
        padding = '2px 10px';
        margin = '0';
        color   = 'white';
        backgroundColor = 'black';
        zIndex   = 100;
        position = 'absolute';
        border   = '1px solid white';
        opacity  = 0.7;
        textAlign = 'left';
        display  = 'none';
        top  = '5px';
        left = '10px';
    }
    document.body.appendChild(tooltip);

    document.addEventListener('click', function() {
        // ツールチップの表示・非表示の切り替え
        if ( tooltip.style.display ) {
            var list = '' ;
            for (var i in event ) {
                list += '<div>' + i + ' : ' + event[i] + '<\div>';
            }
            tooltip.innerHTML='<div> -- event propety -- <\div>' + list;
            tooltip.style.display = '';
        } else {
            tooltip.innerHTML='';
            tooltip.style.display = 'none';
        }
        event.stopPropagation();
        event.preventDefault();
    }, false);
}, false);

ツールチップは div要素です。User JavaScriptの練習というより、CSSの練習だな。

position = 'absolute';
top  = '5px';
left = '10px';

でページに重ねる。

zIndex   = 100;

で上に持ってくる。

opacity  = 0.7;

は透明度の設定。

スタイルの displayプロパティで表示・非表示している。表示したい時は値を無にして、非表示にする時は 'none'を入れる。

参考にしたスクリプト

InfoPanelSimple.user.js

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/58-5157910e
Listed below are links to weblogs that reference
User JavaScriptの練習 - ツールチップのようなものを表示 from Karafuto Blog

Home > user javascript > User JavaScriptの練習 - ツールチップのようなものを表示

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

Page Top

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