マウスオーバーで画像を拡大するJavaScript（複数画像対応版）

投稿日: 2013年9月15日 作成者: alphasis

JavaScriptで、マウスオーバーイベント時に画像を拡大し、マウスアウトイベント時に元の大きさに画像を縮小させる方法。配列やオブジェクトで対象画像や設定を指定できるようにした。

jQueryを使って作る方法については、「jQueryを使い、マウスオーバーで画像を拡大」のページへ。

実装例


実装例（サンプル）の動作について

  1. 画像にマウスのカーソルを合わせると、画像を拡大する。
  2. 画像からマウスのカーソルを外すと、画像を元の大きさに縮小する。

ソースコード

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
    }
};
window.onload = function () {
    for( var $i = 0; $i < $zoomElements.length; $i++ ){
        document.getElementById( $zoomElements[$i] ).onmouseover = function(){
            zoom( this );
        };
        document.getElementById( $zoomElements[$i] ).onmouseout = function(){
            zoomOut( this );
        };
    }
}
function zoom( $this, $id ) {
    $this.style.height = $zoomSettings[$this.id].zoomH + 'px';
    $this.style.width = $zoomSettings[$this.id].zoomW + 'px';
}
function zoomOut( $this, $id ) {
    $this.style.height = $zoomSettings[$this.id].zoomOutH + 'px';
    $this.style.width = $zoomSettings[$this.id].zoomOutW + 'px';
}
</script>

HTML

<img id="sampleImg1" src="sampleImage1.png" />
<br />
<img id="sampleImg2" src="sampleImage2.jpg" />

CSS

<style>
#sampleImg1 {
    height: 32px;
    width: 32px;
}
#sampleImg2 {
    height: 97px;
    width: 185px;
}
</style>

スポンサード リンク

カテゴリー: JavaScript, サイズ, 画像, 逆引き パーマリンク