１画像内に複数リンクを設定！イメージマップの作り方

締切済

質問者：roomba
質問日時：2011/05/16 19:57
回答数：3件

１画像内に複数リンクを設定し、マウスをのせたとき枠を表示させたいのですが・・・

参考イメージ http://www.mapion.co.jp/map/japan.html

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： ORUKA1951
回答日時：2011/05/18 16:42

暇なのでちょっと遊んでみた。

座標さえわかればとっても簡単で色々応用が利く。
画像URLは、ソースに直接いても短縮されて単なるリンクになってしまうので、
Ｈttp://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Map_of_the_prefectures_of_Japan_with_claimed_territories.png/526px-Map_of_the_prefectures_of_Japan_with_claimed_territories.png
の先頭のＨを小文字のhに変更して、URL文字列と入れ替えること
　・・wikipediaの日本地図を利用している・・
★ソース中の全角スペースはタブに置換すること。
<!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:orika1951@hoge.com" title="send a mail" >
　<link rel="START" href="../index.html">
　<style type="text/css">

　</style>
</head>
<body>
　<h1>サンプル</h1>
　<div class="nav">
　　<ul>
　　　<li class="x375 y108"><a href="" title="北海道">　</a></li>
　　　<li class="x343 y193"><a href="" title="青森">　</a></li>
　　　<li class="x352 y224"><a href="" title="岩手">　</a></li>
　　　<li class="x352 y257"><a href="" title="宮城">　</a></li>
　　　<li class="x319 y220"><a href="" title="秋田">　</a></li>
　　　<li class="x319 y257"><a href="" title="山形">　</a></li>
　　　<li class="x325 y291"><a href="" title="福島">　</a></li>
　　</ul>
　<p>画像はWikipedia「都道府県」を引用</p>
　</div>

</body>
</html>

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2011/05/16 23:09

応用で半透明の枠をかぶせるとか、a要素にも同じ座標部分の背景画像を設定して画像の位置をずらしてクリックするとその部分の画像がずれたように見せるとか・・、

　説明がが現れるようにするとか・・

　インライン要素であるa要素をブロック要素にするのがポイントですね。

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2011/05/16 22:59

imagemapではないでしょう。

・・imagemapでしたら、
13.6 イメージマップ ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
に詳しく書いてあります。

　スタイルシートで行うほうが簡単です。

HTMLはナビゲーションリンクとしてマークアップしておきます。
<div class="nav" id="navigation">
　<p><img src=""></p>
　<ul>
　　<li class="hokkaidou"><a href=""></a></li>
　　<li class="aomori"><a href=""></a></li>
　　<li class="akita"><a href=""></a></li>
　　<li class="iwate"><a href=""></a></li>
　</ul>
</div>
　その上で、CSSにて
div#navigation p{margin:0;}
div#navigation{padding:0px;position:relative;}
div#navigation ul,div#navigation ul li{list-style:none;display:block;position:absolute;}
div#navigation ul li{width:60px;height:30px;}
div#navigation ul li a{height:100%;width:100%;}
div#navigation ul li a:hover{border:solid red 1px;}
div#navigation ul li.hokkaidou{top:10px;left:200px;}
div#navigation ul li.aomori{top:40px;left:190px;}
とか・・・
　