jQueryを使い、マウスオーバーイベント時に画像を拡大し、マウスアウトイベント時に元の大きさに画像を縮小させる方法。配列やオブジェクトで対象画像や設定を指定できるようにした。
jQueryを使わずに作る方法については、「マウスオーバーで画像を拡大するJavaScript（複数画像対応版）」のページへ。
アニメーションで拡大縮小させる方法については、「jQueryを使い、マウスオーバーで画像を拡大アニメーション」のページへ。
実装例
実装例（サンプル）の動作について
- 画像にマウスのカーソルを合わせると、画像を拡大する。
- 画像からマウスのカーソルを外すと、画像を元の大きさに縮小する。
ソースコード
JavaScript
<script type="text/javascript">
var $zoomElements = [ 'sampleImg1', 'sampleImg2' ];
var $zoomSettings = {
sampleImg1: {
zoomH: 64,
zoomW: 64,
zoomOutH: 32,
zoomOutW: 32
},
sampleImg2: {
zoomH: 195,
zoomW: 371,
zoomOutH: 97,
zoomOutW: 185
}
};
jQuery( function() {
for( var $i = 0; $i < $zoomElements.length; $i++ ){
jQuery( '#' + $zoomElements[$i] ).mouseover( function () {
jQuery( this ).css( 'height', $zoomSettings[this.id].zoomH + 'px' );
jQuery( this ).css( 'width', $zoomSettings[this.id].zoomW + 'px' );
} );
jQuery( '#' + $zoomElements[$i] ).mouseout( function () {
jQuery( this ).css( 'height', $zoomSettings[this.id].zoomOutH + 'px' );
jQuery( this ).css( 'width', $zoomSettings[this.id].zoomOutW + 'px' );
} );
}
} );
</script>
var $zoomElements = [ 'sampleImg1', 'sampleImg2' ];
var $zoomSettings = {
sampleImg1: {
zoomH: 64,
zoomW: 64,
zoomOutH: 32,
zoomOutW: 32
},
sampleImg2: {
zoomH: 195,
zoomW: 371,
zoomOutH: 97,
zoomOutW: 185
}
};
jQuery( function() {
for( var $i = 0; $i < $zoomElements.length; $i++ ){
jQuery( '#' + $zoomElements[$i] ).mouseover( function () {
jQuery( this ).css( 'height', $zoomSettings[this.id].zoomH + 'px' );
jQuery( this ).css( 'width', $zoomSettings[this.id].zoomW + 'px' );
} );
jQuery( '#' + $zoomElements[$i] ).mouseout( function () {
jQuery( this ).css( 'height', $zoomSettings[this.id].zoomOutH + 'px' );
jQuery( this ).css( 'width', $zoomSettings[this.id].zoomOutW + 'px' );
} );
}
} );
</script>
HTML
<img id="sampleImg1" src="sampleImages1.png" />
<br />
<img id="sampleImg2" src="sampleImages2.jpg" />
<br />
<img id="sampleImg2" src="sampleImages2.jpg" />
CSS
<style>
#sampleImg1 {
height: 32px;
width: 32px;
}
#sampleImg2 {
height: 97px;
width: 185px;
}
</style>
#sampleImg1 {
height: 32px;
width: 32px;
}
#sampleImg2 {
height: 97px;
width: 185px;
}
</style>