|
|
|
03/16(Sun) 01:14
 マウスが当たるとメッセージをテロップ形式で表示する(フォーム)
【お知らせ】イメージマップを使った応用例（2001/02/21）
このJavaScriptのイメージマップ拡張版が幻影の館（TAKAさん）（2009.3.19現在リンク切れです）の「CGIの部屋-実習室-テロップ表示」で入手できます。すばらしい応用を提供して頂いたTAKAさんに感謝！
（どんなイメージ？）私のページに設置してみました。イメージが湧くといいですね（笑）。駅名や町名にマウスをあてて見てください。
マウスがアンカーや画像に当たるとフォームにメッセージをテロップ形式で表示します。
■ 設置方法
- 下の関数をヘッダ部<HEAD>〜</HEAD>に記述します。
- ・「メッセージ文定義」
- ・「メッセージ(テキスト)」--アンカーの場合に使用します
- ・「メッセージ(画像)」------画像の場合に使用します
- 本文<BODY>〜</BODY>中の表示したい場所に下の２つのスクリプトを記述します。
- ・フォーム表示
- ・アンカー／画像表示
■ 下の関数をヘッダ部<HEAD>〜</HEAD>に記述します。
■メッセージ文定義
- bm[msgno]="この部分にフォームに表示したい文字を書きます。";
- msgnoは、msgTextやmsgImageのパラメータmsgnoに対応します。例えば、msgText(0,url,title)と書くとbm[0]のメッセージを表示します。
- メッセージを追加する時は、bm[i]を追加します。いくつでも追加できます。
- openMessage = "今年もおじさん、一生懸命がんばります。m(_ _)m"はフォームに表示される初期値です。
|
<![CDATA[
<SCRIPT language="JavaScript">
<!--
// メッセージ文定義
openMessage = "今年もおじさん、一生懸命がんばります。m(_ _)m";
bm = new Array(); // メッセージの配列定義
bm[0]="菊池さんちの家族のプロフィールです。";
bm[1]="わが家のパソコンとソフトの紹介です。";
bm[2]="気ままな夫婦の海外旅行記です。";
// 初期表示
function telop() {
clearTimeout(guideSw);
document.guide.message.value=openMessage;
}
// マウスが乗ったときのメッセージルーチン
guideSw=true;
function mssg(n) {
clearTimeout(guideSw);
nn=n;
i=0;
typing();
}
// テロップ表示ルーチン
function typing() {
i += 2;
document.guide.message.value=bm[nn].substring(0,i);
if(i <= bm[nn].length) guideSw=setTimeout("typing()",50);
}
// -->
</SCRIPT>
]]>
|
■メッセージ(テキスト)
- アンカーに当たるとメッセージを表示したい時はこれを使います。
- パラメータの説明
・msgno----メッセージ文bm[i]のiの値。
・url------アンカーをクリックした時のジャンプ先。
・title----「プロフィール」等のアンカーの「文字」。
|
<![CDATA[
<SCRIPT language="JavaScript">
<!--
// メッセージ(テキスト)
function msgText(msgno,url,title) {
document.write("<A HREF='"+ url +"' onMouseOver='mssg("+ msgno
+");return true;' onMouseOut='telop()'>")
document.write(title + "</A> ");
}
// -->
</SCRIPT>
]]>
|
■メッセージ(画像)
- 画像に当たるとメッセージを表示したい時はこれを使います。
- パラメータの説明
・msgno----メッセージ文bm[i]のiの値。
・url------画像をクリックした時のジャンプ先
・image----画像データのパス。
・wid------画像の幅(サイズ)。
・hei------画像の高さ(サイズ)。
|
<![CDATA[
<SCRIPT language="JavaScript">
<!--
// メッセージ(画像)
function msgImage(msgno,url,image,wid,hei) {
document.write("<A HREF='"+ url +"' onMouseOver='mssg("+ msgno
+");return true;' onMouseOut='telop()'>")
document.write("<IMG SRC='"+ image +"' width="+ wid +" height="
+ hei +" border=0 alt='o'></A>")
}
// -->
</SCRIPT>
]]>
|
■ 本文<BODY>〜</BODY>中の表示したい場所に下の２つのスクリプトを記述します。
■ フォーム表示
メッセージを記述するフォームを表示します。フォームのサイズを変更するには、
SIZE=50の50を変更します。この値を大きくするとサイズが大きくなります。
|
<![CDATA[
<CENTER><FORM NAME='guide'><INPUT TYPE='text' NAME='message' SIZE=50></FORM></CENTER>
]]>
|
■ アンカー／画像表示
下の例は下記の内容になります。ジャンプさせたくない時はurl部にJavaScript:;と指定します。
- １行目--アンカー「プロフィール」、表示テロップbm[0]、ジャンプ先profile.html
- ２行目--アンカー「パソコン紹介」、表示テロップbm[1]、ジャンプ先pc.html
- ３行目--画像「gifフォルダにあるbanner.gif」、表示テロップbm[2]、ジャンプ先index.htm、画像サイズ88×31
- ４行目--アンカー「クッキー入門（ジャンプしません）」、表示テロップbm[0]、ジャンプ先なし
- ５行目--テッロプの初期値表示の命令です。
|
<![CDATA[
<SCRIPT language="JavaScript">
// マウスが当たるとメッセージを表示
msgText (0,"profile.html","<B>プロフィール</B>");
msgText (1,"pc.html","<B>パソコン紹介</B>");
msgImage (2,"index.htm","gif/banner.gif",88,31);
msgText (0,"javascript:;","<B>クッキー入門（ジャンプしません）</B>");
// 初期値表示
telop();
// -->
</SCRIPT>
]]>
|
|
|
