|
|
|
09/16(Mon) 18:28
 メニューにマウスがあたると画像を反転(１)と説明文テロップ表示の併用方法
【お知らせ】イメージマップを使った応用例（2001/02/21）
このJavaScriptは、１画像１テロップですがイメージマップを使った複数画像、複数テロップ表示の機能拡張版が幻影の館（TAKAさん）（2009.3.19現在リンク切れです）の「CGIの部屋-実習室-テロップ表示」で入手できます。すばらしい応用を提供して頂いたTAKAさんに感謝！
- 「メニューにマウスがあたると画像を反転(１)」のスクリプトですでに画像が定義されてますのでこれをベースに、「説明文テロップ表示」の中の「アンカー付きメッセージ(画像)msgImage()」の代わりに「マウスが乗ったときのメッセージルーチンmssg()」部分を使います。
- この関数をonMouseOver=の中に追加します。onMouseOut=にはtelop()を追加します。
- 下にHTML文とスクリプトを載せてありますので参考にして下さい。「メニューにマウスがあたると画像を反転(１)」「説明文テロップ表示」についてはそれぞれの解説記事を参照して下さい。
なお、下のスクリプトでは、使用しない関数など不要な部分は削除してあります。
下のメニューにマウスをあてて見て下さい。メニューの文字にマウスが当たるとメニューの左にある矢印画像がグレーから赤に変化します。同時にフォームに説明テロップを表示します。どのメニューが選択されたかが一目で解り親切ですね。
クッキー入門
BGM/音声の挨拶(1)
ドキュメント情報
おみくじ
|
<![CDATA[
<HTML>
<HEAD>
<TITLE>java54</TITLE>
<script language="JavaScript">
<!--
//画像のpreload
if (document.images) {
img1=new Image(16,16); img1.src="../gif/folderg.gif";
img2=new Image(16,16); img2.src="../gif/folderr.gif";
}
//イメージオジェクト
function Over(n) {
if (document.images) { document.images["imge" + n].src = img2.src; }
}
function Out(n) {
if (document.images) { document.images["imge" + n].src = img1.src; }
}
//-->
</script>
<SCRIPT language="JavaScript">
<!--
// メッセージ文定義
openMessage = "今年もおじさん、一生懸命がんばります。m(_ _)m";
bm = new Array(); // メッセージの配列定義
bm[0]="菊池さんちの家族のプロフィールです。";
bm[1]="わが家のパソコンとソフトの紹介です。";
bm[2]="気ままな夫婦の海外旅行記です。";
bm[3]="わが家のお手軽料理のレシピです。";
// 初期表示
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>
</HEAD>
<BODY bgcolor="#FFE4C4" text="navy">
<SCRIPT Language="JavaScript">
<!--
// フォーム表示
document.write("<FORM NAME='guide'>");
document.write("<INPUT TYPE='text' NAME='message' SIZE=50></FORM>");
// 初期値表示
telop();
// -->
</SCRIPT>
<p>
<img src="../gif/folderg.gif" name="imge41" width=16 height=16 align="top">
<a href="../ubu.html" onMouseOver="Over(41);mssg(0); return true"
onMouseOut="Out(41);telop(); return true">プロフィル</a><br>
<img src="../gif/folderg.gif" name="imge42" width=16 height=16 align="top">
<a href="../ubu.html#pc" onMouseOver="Over(42);mssg(1); return true"
onMouseOut="Out(42);telop(); return true">パソコン紹介</a><br>
<img src="../gif/folderg.gif" name="imge51" width=16 height=16 align="top">
<a href="../father.html" onMouseOver="Over(51);mssg(2); return true"
onMouseOut="Out(51);telop(); return true">海外旅行記</a><br>
<img src="../gif/folderg.gif" name="imge61" width=16 height=16 align="top">
<a href="../mother.html" onMouseOver="Over(61);mssg(3); return true"
onMouseOut="Out(61);telop(); return true">料理レシピ</a><br>
</b><p>
</BODY>
</HTML>
]]>
|
|
|
