menu
menu

キーワード検索

 

前月(8月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5 Tips】スマホサイトの作成・基本編
  4. ( 4-) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 5-) 【実践でjQuery入門】jQueryで日時を表示
  6. ( 7↑) 【制作Tips】スマホサイト向け横にスクロールするナビゲーション
  7. ( 6↓) 【JavaScript Tips】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( -↑) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. ( 8↓) 【HTML5】HTML5・ページ作成の基本

クリッカブルマップ

  • Labs

HTML

こんにちは(・∀・)

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

3種類のサンプルをご用意しました。一つ目は通常のクリッカブルマップ。二つ目は通常のクリッカブルマップをJavaScriptでロールオーバーするクリッカブルマップ。三つ目は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: 940px;
  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

サンプルデモはこちら


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

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

  • カテゴリー:Labs