Javascript

クリッカブルマップを使ったロールオーバー

Category

Javascript

1枚の画像に複数のリンクを設定する際"クリッカブルマップ(イメージマップ)"を使用することで、複雑な形でもリンク領域を指定できますので結構便利です。
「このクリッカブルマップ(イメージマップ)で、指定領域にカーソルを合わせた時に画像をロールオーバー出来れば便利かも」と思ったことはないでしょうか?
ちょっとしたJavascriptで簡単に実装できますので、今回はその方法をデモページも交えて紹介しようと思います。

Keyword:クリッカブルマップ,ロールオーバー,Javascrpt

クリッカブルマップを使ったロールオバー

ロールオーバー用のスクリプトを用意する

rollover.js

/* Rollover Script */

if(navigator.appVersion.charAt(0) >=3){
var rolimg = new Array();
for( i = 0 ; i < 10 ; i++ ){
rolimg[i] = new Image();
}

// ロールオーバー前のイメージのパス
rolimg[0].src= "image/○○○.○○○"
// クリッカブルマップでロールオーバーさせるイメージ1のパス
rolimg[1].src= "image/○○○.○○○"
// クリッカブルマップでロールオーバーさせるイメージ2のパス  
rolimg[2].src= "image/○○○.○○○"
// クリッカブルマップでロールオーバーさせるイメージ3のパス  
rolimg[3].src= "image/○○○.○○○"
}

function paintRol(dim,cnt){
if(navigator.appVersion.charAt(0) >= 3 ){
document.images[dim].src=rolimg[cnt].src;
}
}

補足

“rolimg[0]”の箇所には、ロールオーバー前のイメージのパスを記述します。
そして”rolimg[1]”には、ロールオーバーさせるイメージのパスを記述します。
複数枚ロールオーバーさせるイメージがある場合、”[1]”の箇所を”[2]”や”[3]”…といったように連番で続け、同じようにロールオーバーさせるイメージのパスを記述してやります。

rollover.jsを外部ファイルで読み込み、クリッカブルマップを設定

HTML(rollover.jsの読み込み)

<head>
<script language="JavaScript" src="js/rollover.js" type="text/javascript"></script>
</head>

HTML(クリッカブルマップの設定)

<!--ロールオーバー前のイメージのパス-->
<img src="image/○○○.○○○" alt="○○○" width="○○○" height="○○○" border="0" usemap="#map" name="rollover" />
<!--クリッカブルマップの設定--> 
<map name="map" id="map">
<area shape="poly" coords="○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○" href="#" onMouseOver="paintRol('rollover',1)" onMouseOut="paintRol('rollover',0)" />
<area shape="poly" coords="○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○" href="#" onMouseOver="paintRol('rollover',2)" onMouseOut="paintRol('rollover',0)" />
<area shape="poly" coords="○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○,○○○" href="#" onMouseOver="paintRol('rollover',3)" onMouseOut="paintRol('rollover',0)" />

補足

●ロールオーバー前のイメージのパス
ロールオーバー前のイメージのパスを記述します。
続けてusemap=”#map” name=”rollover”を追記します。
([1]・・・usemap=”#map”、[2]・・・name=”rollover”)
alt属性には画像が表示出来ない環境向けの代替テキストを、width属性とheight属性には画像の幅と高さをピクセルで、border属性には枠線の太さをピクセルで記述してください(HTML5では、width属性とheight属性にパーセント単位での指定は認められなくなりました。また、画像のborder属性は値が”0″の場合に限り認められています)。
[1]のusemap属性には、対象となるmap要素のname属性値を#に続けて記述します(この場合、対象となるmap要素は<map name=”map” id=”map”>で、name属性値は”map”となります。また、map要素に”id属性値”がある場合、name属性値はid属性値と同じでなければいけません)。
[2]のname属性には、area要素内のonMouseOver(マウスオーバー)とonMouseOut(マウスアウト)で指定しているpaintRol内の”rollover”と同じものを記述します。

●クリッカブルマップの設定
shape属性には、リンクを設定する領域の形状を記述します。
・長方形:rect
・円形:circle
・画像全体:default
・多角形:poly

coords属性には、座標を記述します。
[shape属性がpoly(多角形)の場合の記述例]
coords=”頂点1のX座標,同Y座標,頂点2のX座標,同Y座標,…”
頂点の数だけ続けて記述します。

onMouseOver=”paintRol(‘rollover’,1)”は、rollover.jsに記述した”rolimg[1]”の画像をマウスオーバー時に呼び出します(数字の箇所をrollover.jsで設定した”rolimg[数字]”と対応させてください)。
onMouseOut=”paintRol(‘rollover’,0)”は、rollover.jsに記述した”rolimg[0]”の画像をマウスアウト時に呼び出します。

以下の”Demo Page”ボタンをクリックするとデモページをご覧いただけます。

Demo Page

List

関連記事(※当記事と関連性が高いと思われる記事)

HTML5導入前に覚えておきたいこと

2011/12/22
HTML5
スコア:3 ※スコアの数値が大きいほど、関連性の高い記事です。 SafariやFirefoxといったモダンブラウザは以前からHTML5の新要素に対応していましたが、Internet Explorerが対応していなかったため、以前と同... 続きを読む...

Internet Explorer9以前でもCSS3を使う

2012/03/04
CSS3
スコア:3 ※スコアの数値が大きいほど、関連性の高い記事です。 CSS3 PIEで何ができるの? CSS3 PIEは、Javascriptを使ってInternet Explorer6~8でも一部のCSS3を使えるようにするスクリプト... 続きを読む...

WordPressの検索表示をカスタマイズする

2012/03/11
WordPressの検索表示をカスタマイズ
スコア:3 ※スコアの数値が大きいほど、関連性の高い記事です。 以下の手順で紹介していきます。※テキストリンクをクリックすると、その箇所までページがスクロールします。 検索フォームを変更する 検索結果に「入力した検索ワード」と「該当... 続きを読む...

jQuery UIのタブメニュー

2012/07/25
jQuery UIのタブメニュー
スコア:3 ※スコアの数値が大きいほど、関連性の高い記事です。 以下の順で紹介していきます。※テキストリンクをクリックすると、その箇所までページがスクロールします。 jQuery UIのサイトから必要なライブラリをダウンロードする ... 続きを読む...

おすすめ書籍・商品(※当記事と関連性が高いと思われる書籍・商品)

ページの先頭へ