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

o メニューにマウスがあたると画像を反転(2)と説明文テロップ表示の併用方法
【お知らせ】イメージマップを使った応用例(2001/02/21)
このJavaScriptは、1画像1テロップですがイメージマップを使った複数画像、複数テロップ表示の機能拡張版が幻影の館(TAKAさん)(2009.3.19現在リンク切れです)の「CGIの部屋-実習室-テロップ表示」で入手できます。すばらしい応用を提供して頂いたTAKAさんに感謝!
  1. 「メニューにマウスがあたると画像を反転(2)」のスクリプトですでに画像が定義されてますのでこれをベースに、「説明文テロップ表示」の中の「アンカー付きメッセージ(画像)msgImage()」の代わりに「マウスが乗ったときのメッセージルーチンmssg()」部分を使います。

  2. この関数をonMouseOver=の中に追加します。onMouseOut=にはtelop()を追加します。

  3. 下にHTML文とスクリプトを載せてありますので参考にして下さい。「メニューにマウスがあたると画像を反転(2)」「説明文テロップ表示」についてはそれぞれの解説記事を参照して下さい。
    なお、下のスクリプトでは、使用しない関数など不要な部分は削除してあります。




<HTML> <HEAD> <TITLE>java41</TITLE> <script language="JavaScript"> <!-- //画像のpreload function preload() { if (document.images) { this.length = preload.arguments.length; for (var i = 0; i < this.length; i++) { this["imge"+i+1] = new Image(); this["imge"+i+1].src = preload.arguments[i]; } } } if (document.images) { var stuff = new preload( "logo/profile_on.gif","logo/pc_on.gif","logo/ryokou_on.gif") } //イメージオブジェクト function onSelect(n) { if (document.images) { var src = document.images["imge" + n].src; var off = src.lastIndexOf("off"); if (off != -1) { var newsrc = src.substring(0,off) + "on"; document.images["imge" + n].src = newsrc + ".gif"; } } } function offSelect(n) { if (document.images) { var src = document.images["imge" + n].src; var on = src.lastIndexOf("on"); if (on != -1) { var newsrc = src.substring(0,on) + "off" + src.substring(on + 2, src.length); document.images["imge" + n].src = newsrc; } } } //--> </script> <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> </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> <a href="../ubu.html" onMouseOver="onSelect(1);mssg(0); return true" onMouseOut="offSelect(1);telop(); return true"> <img src="logo/profile_off.gif" name="imge1" border="0" width=98 height=16></a><br> <a href="../ubu.html#pc" onMouseOver="onSelect(2);mssg(1); return true" onMouseOut="offSelect(2);telop(); return true"> <img src="logo/pc_off.gif" name="imge2" border="0" width=98 height=16></a><br> <a href="../father.html" onMouseOver="onSelect(3);mssg(2); return true" onMouseOut="offSelect(3);telop(); return true"> <img src="logo/ryokou_off.gif" name="imge3" border="0" width=98 height=16></a><br> </BODY> </HTML>


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

スポンサーリンク

関連コンテンツ