クリッカブルマップの画像置換

こんにちは、ゼノフィ渡部です。

クリッカブルマップによる画像置換をご紹介いたします。

今回はJavaScriptを使用します。

クリッカブルマップで使用するオンマウスオーバー、オンマウスアウト、オンクリック時の画像を用意します。画像の内訳は通常時の画像、四角形のオーバー時の画像、円のオーバー時の画像、四角形のクリック時の画像、円のクリック時の画像、合計5つです。

通常時の画像

四角形のオーバー時の画像

円のオーバー時の画像

四角形のクリック時の画像

円のクリック時の画像

まず、figure要素とimg要素の初期表示をクリアします。

figure {
  margin: 0; /* 余分なマージンを消去 */
  padding: 0; /* 余分なパディングを消去 */
}
 
img {
  border: 0; /* 画像のボーダー線を消去 */
}

オンマウスオーバー、オンマウスアウト、オンクリック時の動きをjavasritptで記述します。「var objElement」ではクリッカブルマップの本体に当たるimg要素のidを代入しています。「objElement.src」は各マウスイベント時に使用される画像のパスを代入しています。

function square_over(){
    var objElement = document.getElementById( 'map' );
    objElement.src = 'img_square_over.gif';
}
 
function circle_over(){
    var objElement = document.getElementById( 'map' );
    objElement.src = 'img_circle_over.gif';
}
 
function image_out(){
    var objElement = document.getElementById( 'map' );
    objElement.src = 'img_map.gif';
}
 
function square_click(){
    var objElement = document.getElementById( 'map' );
    objElement.src = 'img_square_click.gif';
}
 
function circle_click(){
    var objElement = document.getElementById( 'map' );
    objElement.src = 'img_circle_click.gif';
}

HTMLファイルにクリッカブルマップの座標を記述する際は、記述をアシストするソフトを使用すると作成がとても楽になります。詳細な記述の仕方はここでは省きます。

img要素には「var objElement」に代入するidを記述します。ここでは「id="map"」としています。「<area shape…」にはjavascriptで記述した、オンマウスオーバー、オンマウスアウト、オンクリック時の動きを可能にするため、四角画像の座標エリア(<area shape="rect"…)には「onmouseover="square_over()"」、「onmouseout="image_out()"」、「onclick="square_click()"」を記述します。

円画像の座標エリア(<area shape="circle")には「onmouseover=”circle_over()” 」、「onmouseout=”image_out()” 」、「onclick=”circle_click()”」を記述します。

<figure>
    <img src="img_map.gif" alt="クリッカブルマップ" width="245" height="85" usemap="#image_map" id="map" />
    <map id="image_map" name="image_map">
        <area shape="rect" coords="0,3,86,81" onmouseover="square_over()" onmouseout="image_out()" onclick="square_click()" href="#" alt="四角" />
        <area shape="circle" coords="202,43,42" onmouseover="circle_over()" onmouseout="image_out()" onclick="circle_click()" href="#" alt="円" />
    </map>
</figure>

以上で、各マウスイベント時に画像を切り替えることができます。

クリッカブルマップを使用するような状況は、複雑なイラスト画像で各画像をクリックした時にページ遷移、もしくは複雑なクリッカブルマップで作成されたボタン画像をクリックした場合に、画像を切り替えつつ他の動的な何かの動きと連携する場合、などが思い当たります。そのような状況で、クリッカブルマップ画像を切り替える必要があれば使用する機会はあるのではないでしょうか。

サンプル

CSS

figure {
  margin: 0; /* 余分なマージンを消去 */
  padding: 0; /* 余分なパディングを消去 */
}
 
img {
  border: 0; /* 画像のボーダー線を消去 */
}

JavaScript

function square_over(){
    var objElement = document.getElementById( 'map' );
    objElement.src = 'img_square_over.gif';
}
 
function circle_over(){
    var objElement = document.getElementById( 'map' );
    objElement.src = 'img_circle_over.gif';
}
 
function image_out(){
    var objElement = document.getElementById( 'map' );
    objElement.src = 'img_map.gif';
}
 
function square_click(){
    var objElement = document.getElementById( 'map' );
    objElement.src = 'img_square_click.gif';
}
 
function circle_click(){
    var objElement = document.getElementById( 'map' );
    objElement.src = 'img_circle_click.gif';
}

HTML

<figure>
    <img src="img_map.gif" alt="クリッカブルマップ" width="245" height="85" usemap="#image_map" id="map" />
    <map id="image_map" name="image_map">
        <area shape="rect" coords="0,3,86,81" onmouseover="square_over()" onmouseout="image_out()" onclick="square_click()" href="#" alt="四角" />
        <area shape="circle" coords="202,43,42" onmouseover="circle_over()" onmouseout="image_out()" onclick="circle_click()" href="#" alt="円" />
    </map>
</figure>

Webデザイン

クリッカブルマップの画像置換

カテゴリ

アーカイブ