【Labs】クリッカブルマップ

こんにちは（・∀・）

今回はクリッカブルマップのご紹介です。

3種類のサンプルをご用意しました。一つ目は通常のクリッカブルマップ。二つ目は通常のクリッカブルマップをJavaScriptでロールオーバーするクリッカブルマップ。三つ目はCSSでクリッカブルマップ風。です。

Contents

1. クリッカブルマップ
2. JavaScriptでロールオーバーするクリッカブルマップ
3. CSSでロールオーバーするクリッカブルマップ

1. クリッカブルマップ

通常のクリッカブルマップです。

サンプル

HTML

<div class="clickablemap">
<p><img src="image.jpg" alt="" usemap="#c_map"></p>
<map name="c_map">
<area shape="rect" coords="48,139,98,189" href="#" alt="">
<area shape="circle" coords="130,164,25" href="#" alt="">
<area shape="poly" coords="187,139,180,155,163,158,175,170,172,188,187,180,202,188,200,170,212,158,195,155" href="#" alt="">
<area shape="rect" coords="234,153,255,175">
<area shape="rect" coords="219,139,269,188" href="#" alt="">
</map>
</div>

CSS

.clickablemap {
  width: 940px;
  height: 300px;
  margin: 0 auto;
}

Result

サンプルデモ

2. JavaScriptでロールオーバーするクリッカブルマップ

サンプルをダウンロードして画像を見てもらえばわかりますが、マウスオンした時にボタンだけ入れ替わっているのではなく、画像全体が入れ替わる様になっています。

サンプル

HTML

<div class="clickablemap">
<p><img src="image.jpg" alt="" usemap="#c_map" id="c_map"></p>
<map name="c_map">
<area shape="rect" coords="48,139,98,189" href="#" alt="" id="link1">
<area shape="circle" coords="130,164,25" href="#" alt="" id="link2">
<area shape="poly" coords="187,139,180,155,163,158,175,170,172,188,187,180,202,188,200,170,212,158,195,155" href="#" alt="" id="link3">
<area shape="rect" coords="234,153,255,175">
<area shape="rect" coords="219,139,269,188" href="#" alt="" id="link4">
</map>
</div>

CSS

.clickablemap {
  width: 940px;
  height: 300px;
  margin: 0 auto;
}

JavaScript

var mapimg = new Array(5);
mapimg[0] = 'image.jpg';
mapimg[1] = 'btn1_on.jpg';
mapimg[2] = 'btn2_on.jpg';
mapimg[3] = 'btn3_on.jpg';
mapimg[4] = 'btn4_on.jpg';
function mapover() {
document.getElementById('link1').onmouseover = function() {
document.getElementById('c_map').src = mapimg[1];
}
document.getElementById('link1').onmouseout = function() {
document.getElementById('c_map').src = mapimg[0];
}
document.getElementById('link2').onmouseover = function() {
document.getElementById('c_map').src = mapimg[2];
}
document.getElementById('link2').onmouseout = function() {
document.getElementById('c_map').src = mapimg[0];
}
document.getElementById('link3').onmouseover = function() {
document.getElementById('c_map').src = mapimg[3];
}
document.getElementById('link3').onmouseout = function() {
document.getElementById('c_map').src = mapimg[0];
}
document.getElementById('link4').onmouseover = function() {
document.getElementById('c_map').src = mapimg[4];
}
document.getElementById('link4').onmouseout = function() {
document.getElementById('c_map').src = mapimg[0];
}
document.getElementById('link5').onmouseover = function() {
document.getElementById('c_map').src = mapimg[5];
}
document.getElementById('link5').onmouseout = function() {
document.getElementById('c_map').src = mapimg[0];
}
}
if(window.addEventListener) {
window.addEventListener("load",mapover,false);
} else if(window.attachEvent) {
window.attachEvent("onload",mapover);
}

Result

サンプルデモ

3. CSSでロールオーバーするクリッカブルマップ

こちらもクリッカブルマップではありません、クリッカブルマップ風です。ボタン4つ目の中あき部分もマウスオンに反応してしまいます。

サンプル

HTML

<div id="clickablemap">
<ul>
<li class="btn1"><a href="#"><img src="btn1.png" alt=""></a></li>
<li class="btn2"><a href="#"><img src="btn2.png" alt=""></a></li>
<li class="btn3"><a href="#"><img src="btn3.png" alt=""></a></li>
<li class="btn4"><a href="#"><img src="btn4.png" alt=""></a></li>
</ul>
</div>

CSS

#clickablemap {
  width: 960px;
  height: 300px;
  margin: 0 auto;
  background: url(image.jpg) no-repeat top left;
  position: relative;
}
#clickablemap ul {
  list-style: none;
}
#clickablemap li.btn1 {
  position: absolute;
  top: 139px;
  left: 48px;
  display: block;
  width: 50px;
  height: 50px;
  background: url(btn1_on.png) no-repeat top left;
}
#clickablemap li.btn2 {
  position: absolute;
  top: 139px;
  left: 105px;
  display: block;
  width: 50px;
  height: 50px;
  background: url(btn2_on.png) no-repeat top left;
}
#clickablemap li.btn3 {
  position: absolute;
  top: 139px;
  left: 162px;
  display: block;
  width: 50px;
  height: 50px;
  background: url(btn3_on.png) no-repeat top left;
}
#clickablemap li.btn4 {
  position: absolute;
  top: 139px;
  left: 219px;
  display: block;
  width: 50px;
  height: 50px;
  background: url(btn4_on.png) no-repeat top left;
}
#clickablemap li a,
#clickablemap li a:link,
#clickablemap li a:visited {
  display: block;
}
#clickablemap li a:hover img,
#clickablemap li a:active img {
  visibility: hidden;
}

Result

サンプルデモ

クリッカブルマップの設定方法は、【HTMLリファレンス】map要素、【HTMLリファレンス】area要素のページを参考にしてください。

座標の取り方は【HTMLリファレンス】area要素のページに解説してありますがrect(四角)の場合、左上X、左上Y、右下X、右下Yをcoordsに記述します。画像をフォトショップで開いてカーソルを持っていくと情報ウィンドウのXYに座標が表示されますので画像の左上と右下にカーソルを合わせた時の座標をcoordsに記述してください。