jQueryでのマウスオーバーによる画像入れ替え

JavaScript HTML

DreamWeaverなどで吐き出されるjavascriptを用いずに、jQueryだけでマウスオーバーによる画像表示の変更を行う。

  • サムネイル画像(XXXX_ex.jpg)にマウスを乗せると表示部分(id: exampleimage)に(XXXX_big.jpg)が表示される。
  • 大きい画像も最初に読み込んでおく仕様。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
	var icache = new Array();
	var eximg = $("#exampleimage");
	$("#showexamples ul li img").each(function(i) {
		var m = this.src.match(/(.+)_ex\.([^\.]+)$/);
		var bigimage = m[1] + '_big.' + m[2];
		icache[this.src] = new Image();
		icache[this.src].src = bigimage;
	});
	$("#showexamples ul li img").mouseover(function() {
		eximg[0].src = icache[this.src].src;
	});
});
//]]>
  </script>
</head>
<body>
....

    <div id="showexamples">
      <img id="exampleimage" src="../img/11_big.jpg"
        alt="例" title="例" width="600" height="400" />
      <ul id="ex1">
        <li><img src="../img/11_ex.jpg" alt="写真11" width="120" height="80" /></li>
        <li><img src="../img/12_ex.jpg" alt="写真12" width="120" height="80" /></li>
        <li><img src="../img/13_ex.jpg" alt="写真13" width="120" height="80" /></li>
        <li><img src="../img/14_ex.jpg" alt="写真14" width="120" height="80" /></li>
      </ul>
      <ul id="ex2">
        <li><img src="../img/21_ex.jpg" alt="写真21" width="120" height="80" /></li>
        <li><img src="../img/22_ex.jpg" alt="写真22" width="120" height="80" /></li>
        <li><img src="../img/23_ex.jpg" alt="写真23" width="120" height="80" /></li>
        <li><img src="../img/24_ex.jpg" alt="写真24" width="120" height="80" /></li>
      </ul>
    </div>

....