ベストアンサー

日本地図（白地図的）にリンクを埋め込む方法

2012/08/29 17:18

ホームページ内に日本地図（白地図的な地図）を表示し各都道府県に「マウスオーバー」すると都道府県が色づき（マウスオーバー属性）クリックすると、各ページへリンクする形のホームページを作りたいのですが、サンプル的なページをご存知の方手法をご存知のかたご教授ください。どうぞよろしくお願いします。

mark_proud
お礼率3% (16/502)

HTML
回答数5
ありがとう数3

みんなの回答 （5）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/09/02 11:41 回答No.4

No.2です。アイデアだけ提示してじゃ、「あまりにも」なので・・ mapを使う方法は、マニュアルも仕様書を含めて豊富にあるのでそちらを参照してください。都道府県名に:hoverすると該当都道府県が赤くなる方法です。　県名表示の位置だけ、表示を確認しながら調整するだけですから、とても楽でしょう。＞率直にナビゲーションリンクを記述して、その文字列をabsoluteで地図上において、その文字列がマウスオーバーされると背景を変える方法　の説明とサンプルを上げておきます。 [HTML] 　セオリーどおり、HTMLには文書構造以外は一切書きません。・先でどのようにプレゼンテーション(表現)を変更できます・携帯電話や点字端末、プリンターなど様々な端末で利用できる・検索エンジンにも理解できる。　ナビゲーションですから <div class="nav"> 　　<ul> 　　　　<li id="hokkaidou"><a href="./hokkaidou">北海道</a></li> 　　　　<li id="aomori"><a href="./aomori">青森県</a></li> 　　　　<li id="akita"><a href="./akita">秋田</a></li> 　　　　<li id="iwate"><a href="./iwate">岩手県</a></li> 　　　　<li id="yamagata"><a href="./yamagata">山形県</a></li> 　　　　<li id="fukushima"><a href="./fukushima">福島県</a></li> 　　</ul> </div> 　とだけ、マークアップしする。 [スタイルシート] 　リンクの数だけ、画像を用意します。２色のGIFで一色を透明にしておけばファイルサイズも小さく転送負荷や描画負荷が問題になることはないでしょう。　今回は640(W)×400(H)の画像を用意しました。　Map of Japan Ver. 1.3 ( http://aoki2.si.gunma-u.ac.jp/map/map.html ) ・全国白地図は背景白-透明色で、全体の輪郭と県境を黒の線・県の部分だけ赤で着色し、それ以外は透明　Z軸座標(z-index)は、0←背景(白)--都道府県着色図--全国枠線--a要素→前面とする。　都道府県名は絶対配置で白地図上に配置する。印刷時には地図は表示せずリンク先URLを印刷する。 ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) 　で検証済みのウェブ標準-HTML4.01strict+CSS2.1 です。タブは＿に置換してあるので戻すこと。　最低限の指定しか指定していません。 ※IEはz-indexに関して重大なバグがありますが、それへの対処はしていません。後出の要素がz-indexを無視して前のものを隠す。　別途、対策が必要でしょう。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen">  ＿</style> ＿<style type="text/css" media="print">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>ナビ</h2> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li id="hokkaidou"><a href="/hokkaidou">北海道</a></li> ＿＿＿＿<li id="aomori"><a href="/aomori">青森県</a></li> ＿＿＿＿<li id="akita"><a href="/akita">秋田</a></li> ＿＿＿＿<li id="iwate"><a href="/iwate">岩手県</a></li> ＿＿＿＿<li id="yamagata"><a href="/yamagata">山形県</a></li> ＿＿＿＿<li id="fukushima"><a href="/fukushima">福島県</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

その他の回答 (4)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/09/02 17:25 回答No.5

IE8以降に対応させるためには、HTMLが煩雑になるので嫌だけど・・＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li id="hokkaidou"><a href="/hokkaidou">北海道</a><img src="./images/map/hokkaidou.gif" width="640" height="400" alt=""></li> ＿＿＿＿<li id="aomori"><a href="/aomori">青森県</a><img src="./images/map/aomori.gif" width="640" height="400" alt=""></li> ＿＿＿＿<li id="akita"><a href="/akita">秋田</a><img src="./images/map/akita.gif" width="640" height="400" alt=""></li> ＿＿＿＿<li id="iwate"><a href="/iwate">岩手県</a><img src="./images/map/iwate.gif" width="640" height="400" alt=""></li> ＿＿＿＿<li id="yamagata"><a href="/yamagata">山形県</a><img src="./images/map/yamagata.gif" width="640" height="400" alt=""></li> ＿＿＿＿<li id="fukushima"><a href="/fukushima">福島県</a><img src="./images/map/fukushima.gif" width="640" height="400" alt=""></li> ＿＿＿</ul> ＿＿</div> として、

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2012/09/01 06:57 回答No.3

"レイヤー"とか"position:absolute"とか"どこでも配置モード"とか呼ばれてるやつ。 http://pv.wi-wi.jp/chizu/

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/08/30 19:32 回答No.2

mapを使うのが良いでしょう。 13.6.1 クライアント側イメージマップ: MAP要素とAREA要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#edef-MAP ) 　座標を求めるのが大変ですよ。--考えただけでぞっとする。ツールはあります。　→PicoClick!の詳細情報 : Vector ソフトを探す！ ( http://www.vector.co.jp/soft/win95/net/se187554.html ) 　画像は白地図と特定の県のみ色が違う画像を47用意して、背景画像を切り替えるほうが位置指定が不要なので楽でしょう。　jqueryを使う方法もありますが、座標を求めるのはやはり大変です。上記で得た座標を使えばなんとか・・ ★クリッカブルマップでのロールオーバー｜ WebScripter.jp ( http://webscripter.jp/technical-note/enabling_rollover_use_clickable_map/ ) 　とか、mapを使う方法はSEO的に・・という文言がありますが、それはソースの書き方次第です。詳しくは最初に紹介した仕様書をお読みください。　簡単なのは、率直にナビゲーションリンクを記述して、その文字列(「山口県」とか)をabsoluteで地図上において、その文字列がマウスオーバーされると背景を変える方法でしょう。AREAを書く必要がありませんから・・