イメージマップ（map要素）を使い、表示画像を切り替える

投稿日: 2014年3月10日 作成者: alphasis

イメージマップ（map要素）を使い、表示画像を切り替えるJavaScriptサンプル。

サンプル（実装例）

サンプル画像

実装例の動作について

  • 画像の右半分をクリックすると、次の画像を表示する。
  • 画像の左半分をクリックすると、前の画像を表示する。
  • 画像の順番は、配列「$sampleImages」に格納した順番。
  • １つ目の画像の表示中に前の画像に切り替えようとすると、前の画像はないので、最後の画像に切り替わる。
  • ５つ目の画像の表示中に後の画像に切り替えようとすると、後の画像はないので、最初の画像に切り替わる。

ソースコード

JavaScript

<script type="text/javascript">
function setSrc( $next ) {
    var $sampleImages = [
        'http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/1.jpg',
        'http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/2.jpg',
        'http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/3.jpg',
        'http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/4.jpg',
        'http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/5.jpg'
    ];
    var $elementReference = document.getElementById( "sample" );
    var $src = $elementReference.src;
    var $currentIndex = $sampleImages.indexOf( $src );
    var $nextIndex = $currentIndex + $next;
    if( $nextIndex > $sampleImages.length - 1 ){ $nextIndex = $nextIndex - $sampleImages.length; }
    if( $nextIndex < 0 ){ $nextIndex = $nextIndex + $sampleImages.length; }
    $elementReference.src = $sampleImages[ $nextIndex ];
}
</script>

HTML

<div id="sampleWrap">
    <image src="http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/3.jpg" alt="サンプル画像" id="sample" useMap="#sampleMap">
    <map name="sampleMap">
        <area shape="rect" coords="0,0,150,198" onclick="setSrc(-1);" />
        <area shape="rect" coords="150,0,300,198" onclick="setSrc(1);" />
    </map>
</div>

CSS

<style>
#sampleWrap area {
    cursor: pointer;
}
</style>

解説

JavaScript

<script type="text/javascript">

function setSrc( $next ) {

    // 画像を配列変数「$sampleImages」に格納
    var $sampleImages = [
        'http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/1.jpg',
        'http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/2.jpg',
        'http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/3.jpg',
        'http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/4.jpg',
        'http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/5.jpg'
    ];

    // id属性値が「sample」である要素への参照を変数「$elementReference」に代入
    var $elementReference = document.getElementById( "sample" );

    // id属性値が「sample」である要素のsrc属性への参照を変数「$src」に代入
    var $src = $elementReference.src;

    // 配列変数「$sampleImages」における現在表示中の画像のインデックスを取得し、変数「$currentIndex」に代入
    var $currentIndex = $sampleImages.indexOf( $src );

    // 次に表示する画像のインデックスを、変数「$nextIndex」に代入
    var $nextIndex = $currentIndex + $next;

    // 次の画像がない場合の処理
    if( $nextIndex > $sampleImages.length - 1 ){ $nextIndex = $nextIndex - $sampleImages.length; }

    // 前の画像がない場合の処理
    if( $nextIndex < 0 ){ $nextIndex = $nextIndex + $sampleImages.length; }

    // 表示画像を切替
    $elementReference.src = $sampleImages[ $nextIndex ];

}

</script>

主に使用した構文、プロパティ、メソッド、イベント等。

スポンサード リンク

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