画像をクリックして小さなウインドウを表示させよう
表示の例
 パンダの画像をクリックすると、小さなウインドウが開きます。
プログラムAのソースをコピーして、画像を表示させたいページのHTMLソースのHEAD区間に貼り付けしましょう。
プログラムAのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function new_win6(){
window.open("java_swindow1.html","","width=400,height=100");
}
//-->
</SCRIPT>
プログラムAのソースの上から4行目の java_swindow1.html が小さなウインドウのアドレス(ファイル名)ですから、あらかじめ小さなウインドウ用のページを作っておき、そのページのアドレスにかえてください。
表示される小さなウインドウのサイズは width=400,height=100, のところで指定をします。よこのサイズなら 400 を、たてのサイズなら 100 をかえてください。
プログラムBのソースをコピーして、画像を表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムBのソース
<a href="#" onClick="JavaScript:new_win6();return false">
<img border="0" src="images/icons1.gif" width="32" height="32">
</a>
2行目の src="images/icons1.gif" の images/icons1.gif が画像のファイル名ですから、あなたの表示させたい画像のファイル名にかえてください。
この images/icons1.gif は大きさが、よこ32ピクセル、たて32ピクセルの画像ですから、width="32" height="32" となっています。この 32  32 は、あなたの選んだ画像の大きさにかえてくださいね。
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
※ 動作確認について
ホームページ作成ソフトのプレビューなどでは、ウインドウが表示されるだけになり、プログラムAのソースで指定したページが表示されないようですから、必ずブラウザで動作確認をしてください。
5・6年生にもわかるやさしいJavaScriptのTOPへ