DHTMLを利用したポップアップコメント
設置例
◎DHTMLを利用したポップアップコメント
設置方法は手順（１）〜（２）を設定するだけです。
IE5.5・IE6.0で動作確認をしています、他のブラウザでは確認していません。
透明フィルタ機能はInternet Explorer4.0以上のみ動作します。
JavaScriptとCSSを<head>〜<head>の中に打ちます。
<script language="javascript">
<!--
document.onmousemove=xMouse_Move;
function xMouse_Move(){
n_Mouse_X = document.body.scrollLeft+event.x;
n_Mouse_Y = document.body.scrollTop+event.y;
}
function xkaisetu_visible(imadoki) {
pos=5;
document.all(imadoki).style.display="block";
document.all(imadoki).style.posLeft = n_Mouse_X+pos;
document.all(imadoki).style.posTop = n_Mouse_Y+pos;
}
function xkaisetu_hiden(imadoki) {
document.all(imadoki).style.display="none";
}
-->
</script>
上記がJavaScript、下記がCSSです。
<style type="text/css">
<!--
.coment {
font-size:10pt;
position:absolute;
padding:2px;
border:2px solid #808080;
background-color:#c0c0c0;
display:none;
filter:alpha(opacity=90,style=0,enabled=true);
}
-->
</style>
JavaScriptのカスタマイズは不可能ですが、CSSのカスタマイズが可能です
CSSのクラス名です。 .coment { フォントサイズの設定：サイズを自由に設定できます（10pt） font-size:10pt; ポジションの設定：変更不可 position:absolute; 文字と枠の間の間隔：自由に設定できます（2px） padding:2px; 枠線の設定：線のサイズ（2px） 線種：『none（非表示）botted：（点線）dashed：（破線） solid：（実線）double：（二重線）』 線のカラー：16進数で（#808080） border:2px solid #808080; 背景カラーの設定：16進数で（#c0c0c0） 画像も設定できます：background-image:url("画像までのパス"); background-color:#c0c0c0; 初期状態の設定：変更不可 display:none; 透明度の設定： 不透明度：0〜100（90） 透過フィルタの種類：変更不可 フィルタの適応：変更不可 filter:alpha(opacity=90,style=0,enabled=true); }
まず、<body>以下の領域へ実際にポップアップするBOXを作成します
<div id="coment1" class="coment">これはリンクボタン１です</div> <div id="coment2" class="coment">これはリンクボタン２です<br>改行もできます＾＾</div> <div id="coment3" class="coment">これはリンクボタン３です<br> <img src="../../img/imadoki_80.gif"><br>画像も表示できます</div>
上記の様に、一つのコメントは<div>タグで挟み作成します、更にid="coment1"の箇所をコメントの数が増えて 行くに従って数字部分を増やして行きます、実際にコメントを打つ部分ではタグも使用できます
コメントボックスの設定が終ったら、リンクボタンや画像タグへ
onMouseover="xkaisetu_visible('coment1')" onMouseout="xkaisetu_hiden('coment1')"
と記述します、括弧内のcoment1の箇所はコメントボックスのidと連動させて下さい。
メニューバーの挿入(I)⇒スクリプト(T)を押して、スクリプトを入力するウインドウを出します、そちらへ以下のタグをメモ帳へ一旦ペーストした後再度メモ帳からコピペするか、直接手打ちして下さい。
編集画面に『Ｊ』このようなマークが出て来ますが、これは消せませんので配置の邪魔にならない所へ置いて置いて下さい、後に画像を追加したい時にはこの『J』のマークを選択して右クリックすると、スクリプトの編集ができます。
<script language="javascript">
<!--
document.onmousemove=xMouse_Move;
function xMouse_Move(){
n_Mouse_X = document.body.scrollLeft+event.x;
n_Mouse_Y = document.body.scrollTop+event.y;
}
function xkaisetu_visible(imadoki) {
pos=5;
document.all(imadoki).style.display="block";
document.all(imadoki).style.posLeft = n_Mouse_X+pos;
document.all(imadoki).style.posTop = n_Mouse_Y+pos;
}
function xkaisetu_hiden(imadoki) {
document.all(imadoki).style.display="none";
}
-->
</script>
上記がJavaScript、下記がCSSです。
<style type="text/css">
<!--
.coment {
font-size:10pt;
position:absolute;
padding:2px;
border:2px solid #808080;
background-color:#c0c0c0;
display:none;
filter:alpha(opacity=90,style=0,enabled=true);
}
-->
</style>
JavaScriptのカスタマイズは不可能ですが、CSSのカスタマイズが可能です
CSSのクラス名です。 .coment { フォントサイズの設定：サイズを自由に設定できます（10pt） font-size:10pt; ポジションの設定：変更不可 position:absolute; 文字と枠の間の間隔：自由に設定できます（2px） padding:2px; 枠線の設定：線のサイズ（2px） 線種：『none（非表示）botted：（点線）dashed：（破線） solid：（実線）double：（二重線）』 線のカラー：16進数で（#808080） border:2px solid #808080; 背景カラーの設定：16進数で（#c0c0c0） 画像も設定できます：background-image:url("画像までのパス"); background-color:#c0c0c0; 初期状態の設定：変更不可 display:none; 透明度の設定： 不透明度：0〜100（90） 透過フィルタの種類：変更不可 フィルタの適応：変更不可 filter:alpha(opacity=90,style=0,enabled=true); }
メニューバーの挿入(I)⇒HTMLマークアップ(H)を押すとマークアップのウインドウが出て来ます そこへ<div>〜</div>のタグでコメントボックスを作成します。
<div id="coment1" class="coment">これはリンクボタン１です</div> <div id="coment2" class="coment">これはリンクボタン２です<br>改行もできます＾＾</div> <div id="coment3" class="coment">これはリンクボタン３です<br> <img src="../../img/imadoki_80.gif"><br>画像も表示できます</div>
上記の様に、一つのコメントは<div>タグで挟み作成します、更にid="coment1"の箇所をコメントの数が増えて 行くに従って数字部分を増やして行きます、実際にコメントを打つ部分ではタグも使用できます
そして、メニューバーの表示（V）⇒HTML（H）でHTMLの表示と編集画面を出してリンクボタンや画像タグへ
onMouseover="xkaisetu_visible('coment1')" onMouseout="xkaisetu_hiden('coment1')"
と記述します、括弧内のcoment1の箇所はコメントボックスのidと連動させて下さい。
