jQueryのプラグインで切替える方法は色々ありますが、jQueryプラグインの利用が多くなる前使ってた方法です。
JavaScriptのdocument.images[].srcを使用して画像要素を切替えます。
1.CSSの記述例
以下は任意です。
<style type="text/css"> <!-- #idLink{ width:180px; text-align:center; margin:0 auto; padding-top:10px; } #idLink a{ text-decoration:none; color:#333333; font-size:18px; } #idLink a:hover{ text-decoration:underline; color:#666666; font-size:18px; } --> </style>
2.JavaScriptの記述例
<script type="text/javascript"> function chgImg(fileName,imgName){ document.images[imgName].src = fileName; } </script>
3.HTMLの記述例
aリンクのonclickで上記functionを呼んでます。
<div align="center"><img name="chg" src="i01.jpg" alt="" width="300" height="300"></div> <div id="idLink"> <a href="javascript:void(0)" onclick="chgImg('i01.jpg','chg');">1</a> <a href="javascript:void(0)" onclick="chgImg('i02.jpg','chg');">2</a> <a href="javascript:void(0)" onclick="chgImg('i03.jpg','chg');">3</a> <a href="javascript:void(0)" onclick="chgImg('i04.jpg','chg');">4</a> <a href="javascript:void(0)" onclick="chgImg('i05.jpg','chg');">5</a> </div>
jQueryを使用せず画像(img)のsrc要素を切替えるデモページ
画像数や容量が多いときは、表示されていない画像を全て読込んでからの方が良いと思います。