G01 文字にさわると別フレームに画像を読み込み、クリックでジャンプする

右フレームの文字に触ると左フレームに画像を読み込みます。クリックするとリンク先へジャンプします。また、NN3.0だと最初のページ(G01FRAME.HTM)の段階で使用する画像をキャッシュへ先行読み込みしているのでレスポンスは多少良くなるはずです。

応用:メニューページとして使うと良いかもしれません。
参照: function, バージョンチェックif(navigator.appVersion.charAt(0)>=バージョン番号){命令}, new, Array(), Image(), onMouseover,

Sample

フレームサンプルページへ行きます-クリックしてください。



Source
ソース
(コピーしてお使いください)

<!--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
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)


Maintained by
tato@fureai.or.jp works1997 Toshirou Takahashi