右フレームの文字に触ると左フレームに画像を読み込みます。クリックするとリンク先へジャンプします。また、NN3.0だと最初のページ(G01FRAME.HTM)の段階で使用する画像をキャッシュへ先行読み込みしているのでレスポンスは多少良くなるはずです。
応用:メニューページとして使うと良いかもしれません。
参照: function, バージョンチェックif(navigator.appVersion.charAt(0)>=バージョン番号){命令}, new, Array(), Image(), onMouseover,
フレームサンプルページへ行きます-クリックしてください。
<!--G01FRAME.HTMの中味--> <html> <head> <title></title> <script language="JavaScript"> <!-- //画像の先読み込み(使う前にキャッシュへ読み込んでレスポンスを良くします) if(navigator.appVersion.charAt(0)>=3){ imgZoo=new Array(3) imgZoo[0]=new Image();imgZoo[0].src="AHIRU.GIF"; imgZoo[1]=new Image();imgZoo[1].src="KAERU.GIF"; imgZoo[2]=new Image();imgZoo[2].src="ZOU.GIF"; } //--> </script> </head> <frameset cols="120,*" frameborder=0 framespacing=0 border="0" bordercolor="#ffffff" noresize> <frame src="g01f0.htm" name="frame0" marginheight="8" marginwidth="10" scrolling="no" noresize> <frame src="g01f1.htm" name="frame1" marginheight="10" marginwidth="12" noresize> </frameset> </html> <!--G01F0.HTMの中味(左フレーム)--> <html> <head> <title></title> <script language="JavaScript"> <!-- //ページ読み込み function ImgChang(fURL){ if(top.window.frame1) top.window.frame1.location.href=fURL } //--> </script> </head> <body bgcolor="#000000" text="#ffffff" link="#ffffff" vlink="#ffffff" alink="#000000"> <table border=1 width=100%><tr><td></td></tr></table><br> <b> <font size=7 face="Osaka" color="green">Z</font> <font size=6 face="Osaka" color="orange">o</font> <font size=6 face="Osaka" color="red">o</font> </b> <table border=4 width=10%><tr><td></td></tr></table> <font size=2><b> <a href="G01F1.HTM" target="frame1">Introduction</a><br> </font> <font size=4> <a href="G01F10.HTM" target="frame1" onMouseover="ImgChang('AHIRU.GIF')">あひる</a><br> <a href="G01F11.HTM" target="frame1" onMouseover="ImgChang('KAERU.GIF')">かえる</a><br> <a href="G01F12.HTM" target="frame1" onMouseover="ImgChang('ZOU.GIF')">ぞう</a><br> </font></b> </body> </html> <!--G01F1.HTMの中味(右フレーム)--> <html> <head> <title></title> </head> <body bgcolor="#ffffff" text="#000000"> <pre> 左のフレームの文字に触ると画像が読み込まれ、 クリックするとリンクされたページへジャンプします。 NN3.x以上なら画像の先読みで多少レスポンスが良くなります。 </pre> </body> </html> <!--G01F10.HTMの中味(あひる)--> <html> <head> <title></title> </head> <body bgcolor="green"> あひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあ<img src="AHIRU.GIF" align="right">あひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひるあひる </body> </html> <!--G01F11.HTMの中味(かえる)--> <html> <head> <title></title> </head> <body bgcolor="orange"> <blink> かえるかえるかえるかえるかえるかえるかえるかえるかえるかえるかえるかえるかえるかえるかえるかえるかえるかえるかえるかえるかえるかえるかえるかえるかえるかえる</blink><p><img src="KAERU.GIF"> </body> </html> <!--G01F12.HTMの中味(ぞう)--> <html> <head> <title></title> </head> <body bgcolor="red"> <img src="ZOU.GIF" align="left"><b>ぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞうぞう</b> </body> </html>
onMouseover="ImgChang('AHIRU.GIF')でマウスカーソルが触ったら関数ImgChang(fURL)のfURLに'AHIRU.GIF'を引き渡して実行しますtop.window.frame1.location.href=fURLframe1(右フレーム)にfURLから渡されるURLを読み込みます
使用している画像:
AHIRU.GIF
KAERU.GIF
ZOU.GIF
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)