jQueryのmouseenterとmouseleaveを使って画像タグのsrc要素を入替え表示してみます。
1.CSSの記述例
以下は任意です。
<style> .clWrap{ width:700px; margin:0 auto; text-align:left; } .clMouseArea{ width:150px; margin:0 auto; border:solid 1px #CCCCCC; cursor:pointer; } </style>
2.読込むJsファイルとJavaScriptの記述例
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $(".clMouseArea").live({ mouseenter:function(){ $(".clMouseArea img").hide().attr('src','mouseenter.jpg').fadeIn(500); }, mouseleave:function(){ $(".clMouseArea img").hide().attr('src','mouseleave.jpg').fadeIn(500); } }); }); </script>
3.HTMLの記述例
<div class="clMouseArea"> <img src="nomouse.jpg" alt="マウスオーバーするエリアの画像" width="150" height="150"> </div> <!--/clMouseArea-->