Java Script
複数のフレームの内容を同時に書き換える
3分割されたフレーム(A,B,C)で、Aのページにあるリンクをクリックした時に、B,CのページをD,Eのページに書き換える。
======<index.html>======
<HTML>
<HEAD><TITLE>Frame Jump</TITLE></HEAD>
<FRAMESET COLS="20%,*">
<FRAME SRC="A.html" NAME="A">
<FRAMESET ROWS="30%,*">
<FRAME SRC="B.html" NAME="B">
<FRAME SRC="C.html" NAME="C">
</FRAMESET>
</FRAMESET>
</HTML>
======<A.html>======
<HTML>
<HEAD>
<SCRIPT>
<!--
function jump(url1, url2) {
window.parent.B.location.href = url1;
window.parent.C.location.href = url2;
return false;
}
// -->
</SCRIPT>
<BODY>
<A HREF="#" onClick="return jump('D.html', 'E.html')">XXX</A>
</BODY>
</HTML>
カーソルがのると画像が変化する
画像の上にカーソルがのるとA.gifはB.gifに、C.gifはD.gifに変化する。
カーソルがはずれると、元に戻る。
======<index.html>======
<HTML>
<HEAD>
<BODY>
<SCRIPT>
<!--
if(navigator.appVersion.charAt(0) >=3){
var btnimg = new Array();
for( i = 0 ; i < 4; i++ ){
btnimg[i] = new Image();
}
btnimg[0].src= "A.gif";
btnimg[1].src= "B.gif";
btnimg[2].src= "C.gif";
btnimg[3].src= "D.gif";
}
function paintBtn(dim,cnt){
if(navigator.appVersion.charAt(0) >= 3 ) {
document.images[dim].src=btnimg[cnt].src;
}
}
// -->
</SCRIPT>
<A onMouseOut="paintBtn('E',0)"
onMouseOver="paintBtn('E',1)">
<IMG SRC="A.gif" NAME="E"></A>
<A onMouseOut="paintBtn('F',2)"
onMouseOver="paintBtn('F',3)">
<IMG SRC="C.gif" NAME="F"></A>
</BODY>
</HTML>
複数の画像をランダムで表示する。
ページを読み込むたびに画像をランダムで表示します。
======<index.html>======
<HTML>
<HEAD>
<BODY>
表示したい場所に
<SCRIPT language="JavaScript">
<!--
IMG=new Array();
IMG[0]="画像URL1";
IMG[1]="画像URL2";
IMG[2]="画像URL3";
IMG[3]="画像URL4";
IMG[4]="画像URL5";
IMG[5]="画像URL6";
IMG[6]="画像URL7";
IMG[7]="画像URL8";
IMG[8]="画像URL9";
IMG[9]="画像URL10";
randsh=Math.floor(9*Math.random());
document.write("<IMG SRC=\""+IMG[randsh]+"\">");
//-->
</SCRIPT>
</BODY>
</HTML>
一定時間毎に画像を順番に切り替える。
一定時間毎に複数の画像を順番に切り替える。setTimeoutの中で、時間を設定（単位はmsec）。
======<index.html>======
<HTML>
<HEAD>
<BODY>
表示したい場所に
<IMG SRC="画像URL1" NAME="SP">
<SCRIPT language="javaScript">
<!--
var NO=0;
img=new Array();
img[0]="画像URL1";
img[1]="画像URL2";
img[2]="画像URL3";
img[3]="画像URL4";
img[4]="画像URL5";
UP();
function UP(){
setTimeout("UP()",5000);
document.SP.src=img[NO];
NO=NO+1
if(NO>4){NO=0;}
}
//-->
</SCRIPT>
</BODY>
</HTML>