1. Home
  2. Webテンプレート
  3. メニュー
  4. マップメニュー

マップメニュー



マップメニューを作成するサンプルコードです。(全国マップ)

イメージマップでリンクを設定しています。


表示例
全国マップ
ご希望のエリアをクリックしてください。
全国マップ 北海道 東北 関東 北陸・信越 東海 近畿 中国 四国 九州 沖縄

※サンプルのため、リンク先のページは設定されていません。

  • このサンプルでは、パディングと境界線を含めたボックスの幅は550pxになります。
  • 北海道から沖縄まで、全国を10のエリアに分けてリンクを設定しています。

使用している画像

map.gif map.gif

▲背景は透過されています。

map_back.gif map_back.gif

画像へは直接リンクしないでください。ダウンロードしてから使用してください)

画像の制作について

参考画像

JavaScriptと組み合わせてマウスオーバーを設定する場合は、以下の画像をご使用ください。

コード

CSSコード


/* --- ボックス --- */
div.area {
width: 542px; /* ボックスの幅 */
padding: 3px; /* ボックスのパディング */
background-color: #ffffff; /* ボックスの背景色 */
border: 1px #e0e0e0 solid; /* ボックスの境界線 */
text-align: center;
}

/* --- マップボックス --- */
div.area dl {
margin: 0;
background: #eef7fe url(map_back.gif) repeat-x top; /* マップボックスの背景(グラデーション) */
border: 1px #e0e0e0 solid; /* マップボックスの境界線 */
}

/* --- タイトルエリア --- */
div.area dt {
margin: 5px; /* タイトルエリアのマージン */
padding: 3px; /* タイトルエリアのパディング */
background-color: #eef7fe; /* タイトルエリアの背景色 */
font-weight: bold; /* 太字 */
color: #3d7eab; /* 文字色 */
}

/* --- コメントエリア --- */
div.area dd.description {
margin: 10px 0; /* コメントエリアのマージン(上下、左右) */
font-size: 80%; /* 文字サイズ */
}

/* --- マップエリア --- */
div.area dd.map {
margin: 20px 0; /* マップエリアのマージン(上下、左右) */
}
div.area dd.map img {
border: none;
}

HTMLコード


<div class="area">

<dl>
<dt>全国マップ</dt>
<dd class="description">ご希望のエリアをクリックしてください。</dd>
<dd class="map">

<img src="map.gif" alt="全国マップ" width="515" height="210" usemap="#mapArea">

<map name="mapArea" id="mapArea">
<area shape="poly" coords="415,2,509,2,485,51,435,51,432,57,388,57" href="#" alt="北海道" title="北海道エリア">
<area shape="poly" coords="386,61,459,61,424,131,369,131,383,104,365,104" href="#" alt="東北" title="東北エリア">
<area shape="poly" coords="351,133,423,133,392,196,363,196,368,187,324,187" href="#" alt="関東" title="関東エリア">
<area shape="poly" coords="277,108,306,108,302,117,358,117,364,106,380,106,368,131,350,131,334,162,293,162,301,144,259,144" href="#" alt="北陸・信越" title="北陸・信越エリア">
<area shape="poly" coords="273,146,299,146,290,164,333,164,322,187,278,187,274,196,248,196" href="#" alt="東海" title="東海エリア">
<area shape="poly" coords="234,117,270,117,256,146,271,146,246,196,203,196,223,154,215,154" href="#" alt="近畿" title="近畿エリア">
<area shape="poly" coords="166,117,232,117,213,154,147,154" href="#" alt="中国" title="中国エリア">
<area shape="poly" coords="150,158,213,158,194,196,131,196" href="#" alt="四国" title="四国エリア">
<area shape="poly" coords="96,117,162,117,118,206,66,206,92,153,78,153" href="#" alt="九州" title="九州エリア">
<area shape="poly" coords="19,180,63,180,50,206,6,206" href="#" alt="沖縄" title="沖縄エリア">
</map>

</dd>
</dl>

</div>

備考

  • イメージマップを利用できない(画像を表示できない)ユーザーのために、同等のメニューを別途用意しておくことをおすすめします。

ページの先頭へ