JavaScriptで、マウスオーバーイベント時に画像を拡大し、マウスアウトイベント時に元の大きさに画像を縮小させる方法。
実装例
実装例（サンプル）の動作について
- 画像にマウスのカーソルを合わせると、画像を拡大する。
- 画像からマウスのカーソルを外すと、画像を元の大きさに縮小する。
ソースコード
JavaScript
<script type="text/javascript">
function zoom( $this, $height, $width ) {
$this.style.height = $height + 'px';
$this.style.width = $width + 'px';
}
</script>
function zoom( $this, $height, $width ) {
$this.style.height = $height + 'px';
$this.style.width = $width + 'px';
}
</script>
HTML
<img id="sampleImg1" onmouseover="zoom( this, 64, 64 );" onmouseout="zoom( this, 32, 32 );" src="sampleImages1.png" />
<br />
<img id="sampleImg2" onmouseover="zoom( this, 195, 371 );" onmouseout="zoom( this, 97, 185 );" src="sampleImages2.jpg" />
<br />
<img id="sampleImg2" onmouseover="zoom( this, 195, 371 );" onmouseout="zoom( this, 97, 185 );" 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>