ボタンをクリックすると、オブジェクトの情報を参照したり変更できます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>DOMを利用してさまざまな情報を参照、設定したい</title>
<script type="text/JavaScript">
<!--
var flg = 1;
function disp(){
alert("src = "+document.getElementById("img1").src+"\n"+
"widht = "+document.getElementById("img1").width+"\n"+
"height = "+document.getElementById("img1").height+"\n"+
"alt = "+document.getElementById("img1").alt+"\n");
}
function img_chg(){
if (flg == 1) {
flg = 2;
document.getElementById("img1").src = "images/img11.jpg";
} else {
flg = 1;
document.getElementById("img1").src = "images/img10.jpg";
}
}
// -->
</script>
</head>
<body>
<p>ボタンをクリックすると、オブジェクトの情報を参照したり変更できます。</p>
<form><input type="button" value="イメージの情報を表示" onclick="disp()">
<input type="button" value="イメージを変更" onclick="img_chg()"></form>
<hr>
<p><img id="img1" src="images/img10.jpg" width="213" height="320" alt="この花はご存知ですか？"></p>
<hr>
</body>
</html>