マウスによる制御（例）

3個の小さい画像の上にマウスを置くと大きな画像が変わる
マウスを3個の小さい画像外に移動させると大きな画像は元に戻る
3個の小さい画像の上でマウスをクリックすると、マウスを3個の
小さい画像外に移動させた時の大きな画像はその画像に変わる

<HTML>
<HEAD>
<TITLE>Profile</TITLE>

<SCRIPT language="JavaScript1.2">
var bgc_default="rena.jpg" ;

function MakeArray(n)
{
  this.length=n ;
}

function disp_a(m)
{
  bgc_default=bgc[m] ;
}

function disp_b(m)
{
  parent.mado.document.clear()
  parent.mado.document.open()
  parent.mado.document.write("<body BgColor=\"#aaccff\">")
  parent.mado.document.write("<center>")
  parent.mado.document.write("<img src=\"",bgc[m],"\" width=400 height=300>") 
  parent.mado.document.write("</center>")
  parent.mado.document.close()
}

function disp_c()
{
  parent.mado.document.clear()
  parent.mado.document.open()
  parent.mado.document.write("<body BgColor=\"#aaccff\">")
  parent.mado.document.write("<center>")
  parent.mado.document.write("<img src=\"",bgc_default,"\" width=400 height=300>") 
  parent.mado.document.write("</center>")
  parent.mado.document.close()
}

</SCRIPT>
</HEAD>
<body bgcolor="000000" text="ffffff" background="bg.gif">
<SCRIPT language="JavaScript1.2">
var bgc=new MakeArray(4) ;
  bgc[0]  = "rena.jpg"  ;
  bgc[1]  = "sn01.jpg"  ;
  bgc[2]  = "sn02.jpg"  ;
  bgc[3]  = "sn03.jpg"  ;
</SCRIPT>
<table>
<tr><td width=500 align=center valign=top>
<a href="#" onMouseDown="disp_a(1)" onMouseOver="disp_b(1)" onMouseOut="disp_c()">
<IMG SRC="sn01.jpg" width=100></A>
<a href="#" onMouseDown="disp_a(2)" onMouseOver="disp_b(2)" onMouseOut="disp_c()">
<IMG SRC="sn02.jpg" width=100></A>
<a href="#" onMouseDown="disp_a(3)" onMouseOver="disp_b(3)" onMouseOut="disp_c()">
<IMG SRC="sn03.jpg" width=100></A>
</td></tr>
<tr><td width=500 align=center valign=top>
<iframe src="m_dumy.html"
        border=3
        width=400 height=300
        name="mado"
        SCROLLING=no MARGINWIDTH=0 MARGINHEIGHT=0>
</iframe>
</td></tr>
</table>
</BODY>
</html>

変数　bgc_default　を定義して初期値（デフォルト画像）を　"rena.jpg"　にする

var bgc_default="rena.jpg" ;

配列の領域を確保する為の関数　：　引数が要素数

function MakeArray(n)
{
  this.length=n ;
}

変数　bgc_default　を変更してデフォルト画像を　bgc[m]　にする

function disp_a(m)
{
  bgc_default=bgc[m] ;
}

ウィンドウに表示する画像を　bgc[m]　にする

function disp_b(m)
{
  parent.mado.document.clear()
  parent.mado.document.open()
  parent.mado.document.write("<body BgColor=\"#aaccff\">")
  parent.mado.document.write("<center>")
  parent.mado.document.write("<img src=\"",bgc[m],"\" width=400 height=300>") 
  parent.mado.document.write("</center>")
  parent.mado.document.close()
}

ウィンドウに表示する画像を　デフォルト画像にする

function disp_c()
{
  parent.mado.document.clear()
  parent.mado.document.open()
  parent.mado.document.write("<body BgColor=\"#aaccff\">")
  parent.mado.document.write("<center>")
  parent.mado.document.write("<img src=\"",bgc_default,"\" width=400 height=300>") 
  parent.mado.document.write("</center>")
  parent.mado.document.close()
}

配列　bgc[ ]　の要素数を　４　にし、　各要素の値を与える

<SCRIPT language="JavaScript1.2">
var bgc=new MakeArray(4) ;
  bgc[0]  = "rena.jpg"  ;
  bgc[1]  = "sn01.jpg"  ;
  bgc[2]  = "sn02.jpg"  ;
  bgc[3]  = "sn03.jpg"  ;
</SCRIPT>

マウスによる操作

<a href="#" onMouseDown="disp_a(1)" onMouseOver="disp_b(1)" onMouseOut="disp_c()">
<IMG SRC="sn01.jpg" width=100></A>

a href="#"

リンクをダミーにする　：　マウスをクリックしたときに　"#"　には飛ばない

onMouseDown="disp_a(1)"

マウスボタンを押したときに関数　disp_a(引数)　を実行

onMouseOver="disp_b(1)"

マウスカーソルがオブジェクト上に乗った時に関数　disp_b(引数)　を実行

onMouseOut="disp_c()"

マウスカーソルがオブジェクト上から離れた時に関数　disp_c()　を実行

onMouseUp="func()"

マウスボタンが離された時に関数　func()　を実行（使用していない）

Inline FRAME ：　画面中央にフレームを表示することができる

<iframe src="m_dumy.html"
        frameborder=3
        width=400 height=300
        name="mado"
        NORESIZE SCROLLING=no MARGINWIDTH=0 MARGINHEIGHT=0>
対応していないブラウザのためのメッセージ
</iframe>

src="m_dumy.html"

フレームの中身に表示する文書のURLを指定

border=3

フレームの枠線の太さをピクセル単位で指定

width=400 height=300

フレームの幅／高さをピクセル単位で指定
（％を付ければパーセンテージで指定）

name="mado"

名前を指定

SCROLLING=no

スクロールバーの表示を制御
　　yes：常に表示
　　no：常に非表示
　　auto：自動（規定値）

MARGINWIDTH=0 MARGINHEIGHT=0

フレームの左右／上下の余白をピクセル単位で指定