WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

イベントハンドラによる画像置換

イベントとは?

イベントとは,ブラウザ上で発生した出来事全般のことを表します。例えばブラウザに表示された画像をマウスをクリックしたり、テキストボックスに文字を入力するといったように,閲覧者が何か操作したときにイベントが発生します。またHTMLがブラウザに読み込まれたり、別のページに移動したという現象もイベントとして認識されます。

イベントハンドラ

イベントをJavaScriptで扱うためには,予め決められているイベントハンドラという機能を使い、イベントの処理を行います。

今回は

- onmouseover(ページ上の部品にマウスカーソルが乗ったとき)
- onmouseout(ページ上の部品からマウスカーソルが外れたと)

の2つを使って画像置換を行います。


今回はイベントハンドラをHTML内に記述していますが、Webページを作成する際は、HTMLとスクリプトは分けて記述することが推奨されているので、今後は徐々にスクリプト部分は分けて記述するようにしていきます。


index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mouseoverイベントによる画像置換</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<div id="header">
<h1>mouseover/mouseoutイベントによる画像置換<span>(画像にマウスをあてると画像置換します。)</span></h1>
</div>
<ul>
<li><img src="img/01.png" alt="外国の街並み" onMouseOver="this.src='img/01_h.png'" onMouseOut="this.src='img/01.png'"></li>
<li><img src="img/02.png" alt="外国の街並み2" onMouseOver="this.src='img/02_h.png'" onMouseOut="this.src='img/02.png'"></li>
<li><img src="img/03.png" alt="カラフルな卵" onMouseOver="this.src='img/03_h.png'" onMouseOut="this.src='img/03.png'"></li>
<li><img src="img/04.png" alt="ひまわり" onMouseOver="this.src='img/04_h.png'" onMouseOut="this.src='img/04.png'"></li>
<li><img src="img/05.png" alt="いちごのスイーツ" onMouseOver="this.src='img/05_h.png'" onMouseOut="this.src='img/05.png'"></li>
<li><img src="img/06.png" alt="一輪のバラ" onMouseOver="this.src='img/06_h.png'" onMouseOut="this.src='img/06.png'"></li>
</ul>
</div>
</body>
</html>
style.css
@charset "utf-8";
/* CSS Document */
/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;
}


/*レイアウト*/
body {
  background: #222;
}
#header {
  background: #FF0080;
}
h1 {
  font-size: 20px;
  padding: 10px;
  text-align: center;
}
h1 span {
  font-size: 14px;
}
ul {
  width: 1230px;
  margin: 0 auto;
  overflow: hidden;
  background: #FFF;
  padding: 5px;
}
li {
  float: left;
  margin: 5px;
}


画像素材
http://yachin29.html.xdomain.jp/js-img.zip