42日目 | javascript クリックで画像チェンジ | javascriptでサブウインドウオープン

授業

javascript クリックで画像チェンジ

  • TV画像の中をくりぬいて、画像をはめこむ(400×500サイズ）。これを3つ用意する。


http://latte.moto-chika.com/0122/tv.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>TVに画像とっかえひっかえ</title>
<title>イメージの操作</title>
<style>
body{
	text-align:center;
}
</style>

<script>
var imgs;
function init(){
	imgs=new Array(3);
	for(var i=0; i<=(imgs.length-1); i++){
		imgs[i]=new Image(400,500);
		imgs[i].src='img/1/'+i+'.jpg'
	}
}
window.onload=init;

var num=0;
function changeImg(){
	document.myImg.src=imgs[num].src
	num++;
	if(num==3) num=0;
}
</script>
</head>
<body>
<h1>イメージを操作する</h1>
<p><img src="img/1/off.jpg" name="myImg" width="400" height="500" onclick="changeImg()"></p>
</body>
</html>

開くボタンでサブウインドウを開き、閉じるボタンで閉じる


http://latte.moto-chika.com/0122/window.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウインドウを開く</title>
<script>
function openWin(){
	var win=window.open('','', 'width=520, height=400'); //windowを開く
	win.document.open(); //documentオブジェクトを開く
	win.document.write('<img src="img/01.jpg">'); //イメージを表示
	win.document.write('<form><p>');//フォームを表示
	win.document.write('<input type="button" value="閉じる"');//[閉じる]ボタンを表示
	win.document.write('onclick="window.close()">');//イベントハンドラ
	win.document.write('<p></form>');
	win.document.close();//documentオブジェクトを閉じる
}
</script>
</head>
<body>
<form name="myForm">
<p>
<input type="button" value="開く" name="openBtn" onclick="openWin()">
</p>
</form>
</body>
</html>
注意点

window.open('','','width=520, height=400');
の''はシングルコート2つです。ダブルコートではありません！間違えやすいので注意！中に何も入っていないシングルコート。

Dreamweaverで作る方法

サブウインドウを開くには、上記のようにスクリプトを手打ちする以外にDreamweaverのビヘイビア-ブラウザウインドウを開くでも動かすことができる。
但しこの場合、閉じるボタンが作られないので、そこだけは自分で手打ちする。