|
ボタンを押すと画像が入れ替わります。ボタンが押されたらすぐに画像が表示されるようにあらかじめ画像を読み込んでおきます。
ボタンを押して試してください。
どんなもんざんしょ。コツは表示する画像をあまり大きくしないことです。先読みするのに時間がかかってしまいますから。だらだらとページに写真を並べるよりいい感じと思います。
ソースは簡単です。
画像を先読みさせる部分です。
<SCRIPT language="javascript">
<!--
gazou=new Array();
gazou[0]=new Image();
gazou[0].src="image1.jpg"; ←このimage1.jpgを画像ファイルの名前に変えます。
gazou[1]=new Image();
gazou[1].src="image2.jpg"; ←このimage2.jpgを画像ファイルの名前に変えます。
gazou[2]=new Image();
gazou[2].src="image3.jpg"; ←このimage3.jpgを画像ファイルの名前に変えます。
-->
</SCRIPT>
|
ボタンの設定部分です。
<TABLE>
<TBODY>
<TR>
<TD><IMG src="image1.jpg" width="150"
height="112" border="0" name="syasin"></TD>
</TR>
<TR>
<TD align="center">
<FORM>
<INPUT type="button" value="画像1" onclick='document.syasin.src="image1.jpg"'>
<INPUT type="button" value="画像2" onclick='document.syasin.src="image2.jpg"'>
<INPUT type="button" value="画像3" onclick='document.syasin.src="image3.jpg"'>
</FORM>
</TD>
</TR>
</TBODY>
</TABLE> |
<IMG src="image1.jpg" width="150" height="112"
border="0" name="syasin">
ここの name="syasin" というところと
<INPUT type="button" value="画像1" onclick='document.syasin.src="image1.jpg"'>
ここの syasin というところは必ず同じ名前を使わなくてはなりません。片方を photo にしたら、必ずもう一方も photo
にします。
value="画像1" の日本語の部分はボタンに表示される部分ですから好きなように変更してください。
画像の数を増やす場合は
gazou[3]=new Image();
gazou[3].src="image4.jpg";
という部分と
<INPUT type="button" value="画像4" onclick='document.syasin.src="image4.jpg"'>
の部分を増やしていきます。
|
