ページのソーステキスト
ソーステキストです。ご不明な点があればメールにてお尋ねください。
<![CDATA[ <HTML> <HEAD>
<TITLE>リンク先等の解説を表示させるためのスクリプトのテスト</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function makeArray(k){
this.length=k
}
function Init(){
word=new makeArray(3)
word[0]="JavaScriptを使ったページ群です。中には使える物もあるかも"
word[1]="JavaScriptを使って色のテストをする物です。"
word[2]="JavaScriptを使った時計です。グラフィカルなものではありません。"
}
function Sentence(num){
self.window.document.forms[0].elements[0].value=word[num]
msg=window.open("","Sentence"+num,"toolbar=no,location=no,directories=no,status=no,width=500,height=100")
msg.window.document.open()
msg.window.document.write("<center>"+word[num]+"<BR>")
msg.window.document.write("<FORM><INPUT TYPE=\"button\" VALUE=\"OK\" onClick=\"window.close()\"></FORM></CENTER>")
msg.window.document.bgColor="#FFFFFF"
msg.window.document.close()
alert(word[num])
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF onLoad="Init()">
<H2>リンク先等の解説を表示させるためのスクリプトのテスト</H2>
ここでは、マウスカーソルを合わせると何らかの説明がでるという最近よくあるスクリプトを考えます。
<P>
一般的に、こういった場合、onMouseOverイベントハンドラを利用します。
<HR>
例:<BR>
<A HREF="index.html" onMouseOver="Sentence(0)">JavaScript実験ページ</A>
<A HREF="colorsys.html" onMouseOver="Sentence(1)">カラーテスト</A>
<A HREF="clock.html" onMouseOver="Sentence(2)">時計</A>
<BR><BR>
それぞれのアンカー部分にマウスカーソルを持っていってみてください。下のフォームの文字列が変わり、ウィンドウが２つ開きます。<B>ウィンドウを閉じないと次の動作に移りませんので注意して操作して下さい。</B>
<form>
<INPUT TYPE="TEXT" size=80 VALUE="ここに解説がでます">
</FORM>
<HR>
このページのソースは<A HREF="messsorc.html" target="double">こちら</A>です。<BR>
これらを全て実行する必要はなく、好みにあった部分だけを記述すればＯＫです。
必ず必要となる部分は、BODYタグ内のonLoadイベントハンドラ部分(onLoad="Init()"のこと)と、
SCRIPTタグに囲まれた部分の上の２つのfunctionでしょう。(function makeArrayとfunction Init）
Init内で定義されているword達は必要に応じて変更します。word=new makeArray(3)の３の部分がwordの個数に相当しますから適宜変更して下さい。
あと、リンクをはっている、アンカータグに付いているonMouseOverイベントハンドラも必要です。
ここでSentence関数を呼び出していますがカッコ内の数字とwordで定義した解説文とが一致するようにしてください。<P>
あとは、function Sentence内を使う物だけにするだけです。
１行目はINPUT TEXTフォーム内に文字列を書き込む部分です。これは１行だけで実現しています。最終行は警告音と共に開くWindowに文字列を書き込む物です。これも１行だけです。
間の数行で新たなWindowを開いてそこに文字を書き込む物です。必要な物以外は削除して構いません。<P>
なお、フォーム内に２バイト文字（日本語など）を書き込むと、UNIX上で動作している英語版のNetscapeNavigatorなどでは確実に文字化けします。<P>
ところで、別にリンクをはる部分がテキストでなくても、バナーなどでも同様です。アンカータグの部分にイベントハンドラが存在するのでクライアントサイドイメージマップ（私の<A HREF="../">トップページ</A>の星座部分）などでも有効になります。
<HR>
<A HREF="messsorc.html">このページのソース</A><BR>
<A HREF="./">JavaScriptの実験ページへ戻る</A><BR>
<A HREF="mailto:webmaster@dyrell.net">メール</A>
</BODY>
</HTML>
]]></plaintext></body>