<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript" src="./myscript.js"></script>
    <title>
      第11回　サンプルHTML
    </title>
  </head>

  <body>
    <a href="http://www.google.co.jp/">
      <img src="./tainomoji.gif" alt="鯛の文字">
    </a>
  </body>

</html>

ここで、a要素の内容が img要素になっています。これは、通常文字で表わされているリンクが、img要素で示された画像になるということです。上記の場合、「./tainomoji.gif」という画像が表示され、それが(クリックすると別のページにジャンプする)リンクになります。実際に上記のHTMLをブラウザで表示したのが下図です。

「タイの絵の領域」と描かれた画像をクリックすると、リンク先の http://www.google.co.jp/ が表示されます。実際に、クリックしてみて下さい。

２．イベントハンドラの指定（onMouseOver）

次に、マウスポインタが画像領域に入ったときに、骨の絵を表示するようにイベントハンドラを指定しましょう。利用するイベントハンドラは、onMouseOverです。

起動するJavaScriptの処理は、myscript.js に定義している以下の gazou1() を利用します。

gazou1() では、骨の画像ファイル（./hone.gif）を document.gazou.src の値としています。この document.gazou.src のうちの「gazou」が、今対象としている画像(領域)を識別する名前を表わしています。この名前は、画像のファイル名とは関係なく、 gazou1() で処理する対象を表わすもので、自由につける(命名する)ことができます。そして、この名前をHTMLファイル中で指定することにより、その画像(領域)に対して、処理を行なうことができるようになります。

function gazou1 () {
  document.gazou.src="./hone.gif";
}

document　：　Webブラウザを表す名前
src　：　対象画像のファイル名を指定する名前

この処理 gazou1() を、onMouseOver で起動するには、以下のように記述します。 onMouseOver属性の書き方は、input要素のときと同じです。更に、img要素の中に、 name="gazou"が追加されています。このnameは、 onMouseOver イベントハンドラが対象とする物(領域)の名前を指定します。この name で指定した名前「gazou」が、イベントハンドラが起動する処理である gazou1() の処理対象と同じにしてあるため、 gazou1()の処理で、画像が置き換わることになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript" src="./myscript.js"></script>
    <title>
      第11回　サンプルHTML
    </title>
  </head>

  <body>
    <a href="http://www.google.co.jp/" onMouseOver="gazou1()">
      <img src="./tainomoji.gif" alt="鯛の文字" name="gazou">
    </a>
  </body>

</html>

下図が、上記のHTMLをWebブラウザで表示したところです。鯛の文字のところに、マウスポインタを持って来ると、骨の絵に変わるでしょう。

ところで、上図では、一旦、骨の絵に変わってしまったら、マウスポインタをどこにもっていっても画像は変化しません。これは、onMouseOverイベントハンドラしか利用していないためです。

３．イベントハンドラの指定２（onMouseOut）

そこで今度は、onMouseOut イベントハンドラを追加し、マウスポインタが画像領域から外に出たら、別の絵(鯛の絵)に変わるようにしましょう。

利用するJavaScriptの処理は、以下の gazou2() です。先の gazou1()との違いは、指定しているファイル名が「./tai.gif」であることだけです。処理対象の名前 document.gazou.src が、同じであることに注意して下さい。

function gazou2() {
  document.gazou.src="./tai.gif";
}

上記の処理 gazou2()を、 onMouseOutイベントハンドラが実行する処理として追加すると、以下のようなHTMLの記述となります。ところで、gazou1() と gazou2()が対象とする領域は当然同じですので、 imgタグ中のname属性の値は先程のままです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript" src="./myscript.js"></script>
    <title>
      第11回　サンプルHTML
    </title>
  </head>

  <body>
    <a href="http://www.google.co.jp/" 
             onMouseOver="gazou1()" onMouseOut="gazou2()">
      <img src="./tainomoji.gif" alt="鯛の文字" name="gazou">
    </a>
  </body>

</html>

上記のHTMLをWebブラウザで表示すると以下のようになります。これで、一応目的が達成できましたね。

【注意】 onMouseOver や onMouseOut が検知する、「領域に入った」とか「領域から出た」というイベントは、その瞬間に(一度)発生するだけであることに注意して下さい。
例えば、マウスポインタが対象領域に入って、そのままずっと留まる場合を考えてみましょう。領域に入る瞬間には、「領域に入った」というイベントが発生します。しかし、マウスポインタが領域に留まっている間は、「領域に入った」というイベントは発生していません。

更に、完成度を上げるために、以下のようなCSSを定義して、画像の外枠 (border)を表示しないようにしましょう。（.norboderは自分でわかり易い名前を付けることができます。）

.noborder {
  border: none;
}

ここでは、mystyle.cssに上記のnoboderというｃｓｓを定義して外枠が表示されないようにしてみました。
更に、初期画像を鯛の絵にしておくと、本来の姿になります。それらを適用したのが、以下のHTMLです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <link rel="stylesheet" type="text/css" href="../css/mystyle.css">
    <script type="text/javascript" src="./myscript.js"></script>
    <title>
      第11回　サンプルHTML
    </title>
  </head>

  <body>
    <a href="http://www.google.co.jp/" 
	           onMouseOver="gazou1()" onMouseOut="gazou2()">
      <img src="./tai.gif" alt="鯛の絵" name="gazou" class="noborder">
    </a>
  </body>

</html>

これで、前章の最初に示した物になりましたね。

(註) 上記の鯛や骨の画像は、背景を透明にして作成しています。そのため、 Webページに背景色をつけてもそのまま表示されます。 GIMP等で普通に画像を作る場合、初期設定では背景が透明になっていないので、 Webページに背景色をつけると、四角い白い領域の中に画像があるようになります。もし、背景を透明にしたいときは、最初からそのような設定を行ない画像を作成して下さい。