jQueryでのマウスオーバーによる画像入れ替え
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> ....