クリックで写真が表示されるよ！！

1 パソコンを用意

2 デスクトップにフォルダを作成「game」

3 テキストエディタ（メモ帳・サクラエディタなど）を起動
保存文字改行コードを「UTF-8」に指定して
「game」フォルダ内に
「geme.html」で名前をつけて保存

4 「geme」フォルダの中に写真をコピーする
写真のファイル名を「name.jpg」に変更

5 以下のプログラムを「geme.html」に貼り付ける

6 ボタンをクリックすると、お子さんの写真に変わります。

注意「マイクロソフトのワード」はテキストエディタではありません
全てのプログラムの中のウィンドウズのオフィスまたはアクセサリーに入っていますが、パソコンの種類によって違います。

※ブラウザは、グーグルクロームを使っています。

コードをコピーして、名前を付けて保存するだけ！！

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <title>画像を変更する1</title>
	<style>
      img {width: 640px;}
	  input	{font-size: 30px;
		margin-bottom: 20px;}	   
</style>
 </head>
 <body>
  <input type="button" value="せかいいち　かわいい　おんなのこは　だあれ？" onclick="changePic()">
  <div id="picdiv">
  </div>

  <script>
  function changePic() {
   var pDiv = document.getElementById("picdiv");
   pDiv.innerHTML = "<img src='name.JPG'>";
  }
	</script>
 </body>
</html>