JavaScriptで、マウスオーバーイベント時に画像を拡大し、マウスアウトイベント時に元の大きさに画像を縮小させる方法。
実装例
![](http://alphasis.info/wp-content/uploads/2010/11/material-icon-sunflower-101121-64x64.png)
![](http://alphasis.info/wp-content/uploads/2011/03/gimp-filter-artistic-softglow-ex-sharpness_1_00.jpg)
実装例(サンプル)の動作について
- 画像にマウスのカーソルを合わせると、画像を拡大する。
- 画像からマウスのカーソルを外すと、画像を元の大きさに縮小する。
ソースコード
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>