DynAmic-html for Multiple browsers support Extensible POpup service
ダイナミックHTMLによる マルチブラウザサポート 拡張ポップアップサービス v 0.4.0
id="myPic" name="myPic"== Layer Settings ==の箇所を設定します。
== Layer Settings (Not NN 4) == の箇所を設定します。
Netscape 4以外のスタイル設定です。
== Layer Settings (NN 4 Only) == の箇所を設定します。
Netscape 4の為の設定です。初期の状態でもそれなりの表示をします。細かい設定は初期値を見てデザインしてください。
== Window Events ==の箇所を設定します。
初期状態(サンプル)では、アルファチャネルPNGイメージマップを DirectXフィルタ(IE 5.5以降)に置換えています。アルファチャネルPNGを使用しないならば、
fixDxImg('myPic',fixDumySrc);の部分を コメントアウト してください。
<head></head>内に<script></script>を挿入する。<script charset="Shift_JIS" src="damepo.js" type="text/javascript"></script>を挿入します。外部 scriptファイルの下に script(内部)で、以下のような変数及び、配列を追加します。
<script type="text/javascript">
destTagArg[0] = 'AREA';// alt,title属性を抑制する要素
destIdArg[0] = 'myPic';// img の id属性
var spFlg = new Array(1,1,1);// spMsgをデコード(解読)するフラグ配列
var spMsg = new Array(3);// メッセージ配列
spMsg[0] = '%3Cp%3Eここを押すと掲示板に飛びます。%3C/p%3E';
spMsg[1] = '%3Cp%3Eここを押すと日記(最新)に飛びます。%3C/p%3E';
spMsg[2] = '%3Cp%3Eここを押すとサイトの入口に飛びます。%3C/p%3E';
codeRestore(spMsg,spFlg);// メッセージ解読を実行する
</script>
<script type="text/javascript">createTips('msgAlphaBox',spMsg);</script>
を、body要素内の任意の位置に挿入します。
createTips関数の変更箇所は、関数に付いての createTips(setInsCls,spMsgArray)を参考にしてください。
area要素内にそれぞれイベントハンドラを挿入する。area要素に、 onmouseout="overTips()" onmousemove="moveTips(event)" onmouseover="showTips(event,spMsg[0],0,50,-20)"を挿入します。
二個目は、onmouseover="showTips(event,spMsg[1],1,50,-20)の様になります。
何もないマップ領域は、<area shape="default" nohref="nohref" onmouseover="overTips()" alt="" />の様になります。shape="default"が無いのならば追加します。
ポップアップレイヤがリンクカーソルに重ならない位置になるよう位置を調整します。
onmouseoverハンドラの showTips関数の変更箇所は、関数に付いての function showTips(e,sMsg,num,ax,ay)を参考にしてください。
メッセージspMsg[x]配列へ与えるタグ及び、文字列をUnicode(16進)変換するツールです。
べたテキストならば無変換で動作しますが、配列内にタグを無変換で置くとブラウザ誤動作の原因です。
なお、エンコード(変換)前の文字列に@(アットマーク)を使用してはなりません。(仕様)
![[Valid XHTML 1.0]](../../image/vxhtml10.png){kind=small}
This URL: http://www.minc.ne.jp/~konda/web_resoce/damepo/howto.html