ボタンを押すと画像とコメントが入れかわる
ソース
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
Img=new Array();
Img[1]="images/test1.gif";
Img[2]="images/test2.gif";
Img[3]="images/test3.gif";
Img[4]="images/test4.gif";
Img[5]="images/test5.gif";
mes=new Array();
mes[1]="<font style='font-size:16px;color:#666666'><b>No.1</b></font><font style='font-size:13px;color:#666666'><br><br>NEXTボタンを押すと、<br><br>次の画像が表示されます。</font>";
mes[2]="<font style='font-size:16px;color:#666666'><b>No.2</b></font><font style='font-size:13px;color:#666666'><br><br>画像といっしょに、<br><br>コメントも入れかわります。</font>";
mes[3]="<font style='font-size:16px;color:#666666'><b>No.3</b></font><font style='font-size:13px;color:#666666'><br><br>BACKボタンを押すと、<br><br>ひとつ前の画像に戻ります。</font>";
mes[4]="<font style='font-size:16px;color:#666666'><b>No.4</b></font><font style='font-size:13px;color:#666666'><br><br>TOPボタンを押すと、<br><br>最初の画像が表示されます。";
mes[5]="<font style='font-size:16px;color:#666666'><b>No.5</b></font><font style='font-size:13px;color:#666666'><br><br>画像が全部表示されると、<br><br>また最初の画像に戻ります。</font>";
cnt=1;
function NextIMG(flag){
if(flag=='next'){
cnt++;
document.MyIMG.src=Img[cnt];
document.all("M1").innerHTML=mes[cnt];
if(cnt>5){
document.MyIMG.src=Img[1];
document.all("M1").innerHTML=mes[1];
cnt=1;
}
}else if(flag=='back'){
if(cnt>1){
cnt--;
document.MyIMG.src=Img[cnt];
document.all("M1").innerHTML=mes[cnt];
}
}else if(flag=='top'){
document.MyIMG.src=Img[1];
document.all("M1").innerHTML=mes[1];
cnt=1;
}
}
//-->
</SCRIPT>
</head>
<body onload="NextIMG('top')">
<center>
<img name="MyIMG" src="images/test1.gif" border="0" width="200" height="150">
</center>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="250" height="80">
<tr>
<td align="center">
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("<span id='M1'></span>");
//-->
</SCRIPT>
</td>
</tr>
</table>
</div>
<center>
<FORM>
<INPUT type="button" value="BACK" onClick="NextIMG('back')">
<INPUT type="button" value="TOP" onClick="NextIMG('top')">
<INPUT type="button" value="NEXT" onClick="NextIMG('next')">
</FORM>
</center>
</body>
</html>
JavaScript GarageのTopへ戻る