03/16(Sun) 02:39
マウスが当たるとメッセージをテロップ形式で表示する(フォーム)
【お知らせ】イメージマップを使った応用例(2001/02/21)
このJavaScriptのイメージマップ拡張版が幻影の館(TAKAさん)(2009.3.19現在リンク切れです)の「CGIの部屋-実習室-テロップ表示」で入手できます。すばらしい応用を提供して頂いたTAKAさんに感謝!
(どんなイメージ?)私のページに設置してみました。イメージが湧くといいですね(笑)。駅名や町名にマウスをあてて見てください。
マウスがアンカーや画像に当たるとフォームにメッセージをテロップ形式で表示します。
■ 設置方法
- 下の関数をヘッダ部<HEAD>〜</HEAD>に記述します。
- ・「メッセージ文定義」
- ・「メッセージ(テキスト)」--アンカーの場合に使用します
- ・「メッセージ(画像)」------画像の場合に使用します
- 本文<BODY>〜</BODY>中の表示したい場所に下の2つのスクリプトを記述します。
- ・フォーム表示
- ・アンカー/画像表示
■ 下の関数をヘッダ部<HEAD>〜</HEAD>に記述します。
■メッセージ文定義
- bm[msgno]="この部分にフォームに表示したい文字を書きます。";
- msgnoは、msgTextやmsgImageのパラメータmsgnoに対応します。例えば、msgText(0,url,title)と書くとbm[0]のメッセージを表示します。
- メッセージを追加する時は、bm[i]を追加します。いくつでも追加できます。
- openMessage = "今年もおじさん、一生懸命がんばります。m(_ _)m"はフォームに表示される初期値です。
■メッセージ(テキスト)
- アンカーに当たるとメッセージを表示したい時はこれを使います。
- パラメータの説明
・msgno----メッセージ文bm[i]のiの値。
・url------アンカーをクリックした時のジャンプ先。
・title----「プロフィール」等のアンカーの「文字」。
■メッセージ(画像)
- 画像に当たるとメッセージを表示したい時はこれを使います。
- パラメータの説明
・msgno----メッセージ文bm[i]のiの値。
・url------画像をクリックした時のジャンプ先
・image----画像データのパス。
・wid------画像の幅(サイズ)。
・hei------画像の高さ(サイズ)。
■ 本文<BODY>〜</BODY>中の表示したい場所に下の2つのスクリプトを記述します。
■ フォーム表示
メッセージを記述するフォームを表示します。フォームのサイズを変更するには、
SIZE=50の50を変更します。この値を大きくするとサイズが大きくなります。
■ アンカー/画像表示
下の例は下記の内容になります。ジャンプさせたくない時はurl部にJavaScript:;と指定します。
- 1行目--アンカー「プロフィール」、表示テロップbm[0]、ジャンプ先profile.html
- 2行目--アンカー「パソコン紹介」、表示テロップbm[1]、ジャンプ先pc.html
- 3行目--画像「gifフォルダにあるbanner.gif」、表示テロップbm[2]、ジャンプ先index.htm、画像サイズ88×31
- 4行目--アンカー「クッキー入門(ジャンプしません)」、表示テロップbm[0]、ジャンプ先なし
- 5行目--テッロプの初期値表示の命令です。
|