menu
menu

クリッカブルマップ | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook3
  • はてなブックマーク3
  • Google+5
  • Pocket0
  • Twitter0

クリッカブルマップ

  • Labs

HTML CSS JavaScript

こんにちは(・∀・)

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


 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;
}
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);
}
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;
}

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

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

  • カテゴリー:Labs
  • facebook3
  • はてなブックマーク3
  • Google+5
  • Pocket0
  • Twitter0