Copyright(C) 2004 web工房 All Rights Reserved
m003
画像(リンク文字)にマウスを重ねるとコメントを表示する
action
 |
画像にカーソルを重ねるとコメント表示 | |
| コメント表示 | リンク文字にカーソルを重ねるとコメント表示 | |
|
テーブルのセルにカーソルを合わせたらコメント表示 |
【方法(2) 】ポップアップウィンドウを作る
下記のリンク文字にマウスを重ねて下さい。ポップアップウィンドウが開きます。
(1)はマスウを離すとポップアップウィンドウが閉じます。
(2)はマウスを離してもポップアップウィンドウは閉じません。
閉じる場合は、ウィンドウ以外をクリックします。
ポップアップウィンドウ(1) ポップアップウィンドウ(2)
ポップアップウィンドウ(3)/サンプルファイル
ポップアップウィンドウ(4)/サンプルファイル
【方法(3) 】<div>〜</div>の表示・非表示を切り替える
下記のリンク文字にマウスを重ねて下さい
コメント表示
web技
■共通属性 title を用いてコメントをポップアップする方法
◆画像の場合(alt="")
<img src="(画像ファイルのパス)" alt="" title="コメントを表示しています">
※alt="コメントを表示しています" でtitle=""を省略してもコメント表示されます。
※altは<img〜>の必須属性で、画像が表示されないときテスキトとして表示されます。
※title と alt を両方指定した場合は、コメント表示としては title=""が優先されます。
◆リンク文字の場合(title="")
<a href="(リンク先のパス)" title="コメントを表示しています">コメント表示
◆テーブル(セル)の場合(title="")
<table>
<tr>
<td title="コメントを表示しています">テーブルのセル<td>
<tr>
<table>
■新たにポップアップウィンドウを作ってコメントを表示する方法
◆手順1【ポップアップウィンドウの設置】(javascript)
※<head>〜</head> に設置します
※innerHTMLでコメントを記述しますが、改行タグが使えます。
※マウスを離すとポップアップウィンドウが閉じるには win_Obj.hide() を用います。
(サンプルファイルを参照して下さい)
-----次の行から(copy)-----
<script type="text/javascript"
<!--
function CreatePup(){
win_Obj=window.createPopup(); //ポップアップウィンドウ作成
Pup_Obj=win_Obj.document.body;
Pup_Obj.style.color="#000000" //スタイル設定(フォント色)
Pup_Obj.style.background="#e7e7e7"; //スタイル設定(背景色)
Pup_Obj.style.fontSize="9pt"; //スタイル設定(フォントサイズ)
Pup_Obj.style.padding="5"; //スタイル設定(余白)
Pup_Obj.innerHTML="◆これはポップアップウィンドウを作ってしまう技です<br>◆ポップ〜〜(以下省略)";
//コメント記述(タグ記述可能)
win_Obj.show(100,100,200,100,document.body);
//ポップアップウィンドウ表示
//showの設定値は
//(ウィンドウ上端からの距離px)---負数にするとウィンドウの外側に表示される
//(ウィンドウ左端からの距離px)---負数にするとウィンドウの外側に表示される
//(ポップアップウンドウ幅px)
//(ポップアップウンドウ高さpx)
}
// -->
</script>
-----上の行まで(copy)-----
◆手順2【スクリプトの実行】
-----次の行から(copy)-----
<a href="#"onMouseover="CreatePup()" title="新たに〜">ポップアップウィンドウを作る</a>
-----上の行まで(copy)-----
■<div style="">にコメントを記述し、その表示・非表示を切り換える方法
◆手順1【コメント部分の設置】
※<div>にIDを設定します(id="Coment")
※<div>に次のstyle属性を設定します
background:#e7e7e7; 背景色(変更可)
position:absolute; positionを設定
top:300; 表示位置px(上から/変更可)
left:20;; 表示位置px(左から/変更可)
visibility:hidden; 非表示設定
filter:alpha(opacity='80'); 背景の透明度設定
(以下省略)
-----次の行から(copy)-----
<div id="Coment" style="color:#000000; background:#e7e7e7; font-size='9pt'; position:absolute; top:300; left:20; width:500; padding:5; visibility:hidden; filter:alpha(opacity='80');">
◆｢マウスを重ねるとコメントを表示する｣とわざわざ書いて、実はその内容は共通属性のtitle=""の説明だった、というのではお客様に申し訳ありませんので(以下省略)
</div>
-----上の行まで(copy)-----
※表示位置や表示幅を設定して、最も効果的な場所に表示します
◆手順2【スクリプトの実行】
-----次の行から(copy)-----
<a href="#"
onMouseover="Coment.style.visibility='visible'"
onMouseout="Coment.style.visibility='hidden'"
title="コメントが表示されます">コメント表示</a>
-----上の行まで(copy)-----
解説等
◆｢ポップアップウィンドウ｣と書いてあるけれど、実際にウィンドウが開くわけでないので、｢ポップアップウィンドウ風に開く｣とかいうように書くのが正しいかも。題名に偽り?あり?。お許しを。
◆さて、解説を少し。
◆titleは｢title属性｣といってオブジェクト等のさまざまな要素に補助的な情報を表示するため共通属性です。いろいろ試してみて下さい。
◆話のついでですが、共通属性とは｢要素(タグで囲まれたhtmlを構成する部品---表・画像等々)で共通に使用できる機能を有する属性｣で、｢class属性｣｢id属性｣｢style属性｣｢lang属性｣｢dir属性｣等があります。
◆ポップアップウィンドウを新たに作る方法は、サンプルファイルを参照して下さい。
◆<div style="">による方法は、[技m013]の応用技で、画面上に配置する場所の余裕がなく、あまり頻繁にみることのない｢使用方法｣等をこんな風に表示してみるのも面白いですね。
◇こんなとき、表示したコメントをドラッグアンドドロップして任意の位置にコメントを移動できれは便利です。
◆ [展望台]のお勧め技5を参照してみて下さい。任意の位置にコメントを移動する、というような技もできます。
keyword
◇title◇div◇createPopup◇hide
history
◇(2004.11.21)新たにポップアップウィンドウを作る技にサンプルを設置しました。これでより判りやすくなるはずです。
◇(2004.09.23)一部、記述を修正しました。
◇(2004.09)展望台(お勧め技)でもこの技を紹介しました。
◇(2004.08.26)title属性によるコメント表示だけではちょっと寂しいので、新たにポップアップウィンドウを作る、<div style="">によって表示・非表示を切り換える方法を追加しました。
◇(2004.05)新たに設置しました。
◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----