本日  昨日
 
03/16(Sun) 01:14

o マウスが当たるとメッセージをテロップ形式で表示する(フォーム)
【お知らせ】イメージマップを使った応用例(2001/02/21)
このJavaScriptのイメージマップ拡張版が幻影の館(TAKAさん)(2009.3.19現在リンク切れです)の「CGIの部屋-実習室-テロップ表示」で入手できます。すばらしい応用を提供して頂いたTAKAさんに感謝!

(どんなイメージ?)私のページに設置してみました。イメージが湧くといいですね(笑)。駅名や町名にマウスをあてて見てください。


マウスがアンカーや画像に当たるとフォームにメッセージをテロップ形式で表示します。


設置方法
  1. 下の関数をヘッダ部<HEAD>〜</HEAD>に記述します。
    ・「メッセージ文定義」
    ・「メッセージ(テキスト)」--アンカーの場合に使用します
    ・「メッセージ(画像)」------画像の場合に使用します

  2. 本文<BODY>〜</BODY>中の表示したい場所に下の2つのスクリプトを記述します。
    ・フォーム表示
    ・アンカー/画像表示


下の関数をヘッダ部<HEAD>〜</HEAD>に記述します。

メッセージ文定義

  1. bm[msgno]="この部分にフォームに表示したい文字を書きます。";
  2. msgnoは、msgTextやmsgImageのパラメータmsgnoに対応します。例えば、msgText(0,url,title)と書くとbm[0]のメッセージを表示します。
  3. メッセージを追加する時は、bm[i]を追加します。いくつでも追加できます。
  4. openMessage = "今年もおじさん、一生懸命がんばります。m(_ _)m"はフォームに表示される初期値です。
<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>

メッセージ(テキスト)

  1. アンカーに当たるとメッセージを表示したい時はこれを使います。
  2. パラメータの説明
    ・msgno----メッセージ文bm[i]のiの値。
    ・url------アンカーをクリックした時のジャンプ先。
    ・title----「プロフィール」等のアンカーの「文字」。
<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>

メッセージ(画像)

  1. 画像に当たるとメッセージを表示したい時はこれを使います。
  2. パラメータの説明
    ・msgno----メッセージ文bm[i]のiの値。
    ・url------画像をクリックした時のジャンプ先
    ・image----画像データのパス。
    ・wid------画像の幅(サイズ)。
    ・hei------画像の高さ(サイズ)。
<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>中の表示したい場所に下の2つのスクリプトを記述します。

フォーム表示

メッセージを記述するフォームを表示します。フォームのサイズを変更するには、 SIZE=5050を変更します。この値を大きくするとサイズが大きくなります。
<CENTER><FORM NAME='guide'><INPUT TYPE='text' NAME='message' SIZE=50></FORM></CENTER>

アンカー/画像表示
下の例は下記の内容になります。ジャンプさせたくない時はurl部にJavaScript:;と指定します。

  1. 1行目--アンカー「プロフィール」、表示テロップbm[0]、ジャンプ先profile.html
  2. 2行目--アンカー「パソコン紹介」、表示テロップbm[1]、ジャンプ先pc.html
  3. 3行目--画像「gifフォルダにあるbanner.gif」、表示テロップbm[2]、ジャンプ先index.htm、画像サイズ88×31
  4. 4行目--アンカー「クッキー入門(ジャンプしません)」、表示テロップbm[0]、ジャンプ先なし
  5. 5行目--テッロプの初期値表示の命令です。
<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>


 
 
©1997- Kikuchisan's workshop All rights reserved //

スポンサーリンク

関連コンテンツ