jQueryを使い、マウスオーバーイベント時に画像を入れ替える方法。
jQueryを使わないで作る方法については、「マウスオーバーで画像を入れ替えるJavaScript」もしくは「マウスオーバーで画像を入れ替えるJavaScript（DOM操作）」のページへ。
実装例
実装例（サンプル）の動作について
- 画像にマウスのカーソルを合わせると、画像を入れ替える。
- 画像からマウスのカーソルを外すと、元の画像に戻す。
ソースコード
JavaScript
<script type="text/javascript">
jQuery( function() {
var $sampleImg = jQuery( '#sampleImg' );
$sampleImg.attr( 'src', 'sampleA.png' );
$sampleImg.mouseover( function () {
jQuery( this ).attr( 'src', 'sampleB.png' );
} );
$sampleImg.mouseout( function () {
jQuery( this ).attr( 'src', 'sampleA.png' );
} );
} );
</script>
jQuery( function() {
var $sampleImg = jQuery( '#sampleImg' );
$sampleImg.attr( 'src', 'sampleA.png' );
$sampleImg.mouseover( function () {
jQuery( this ).attr( 'src', 'sampleB.png' );
} );
$sampleImg.mouseout( function () {
jQuery( this ).attr( 'src', 'sampleA.png' );
} );
} );
</script>
HTML
<div>
<img id="sampleImg">
</div>
<img id="sampleImg">
</div>