締切済み

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

2011/05/16 19:57

１画像内に複数リンクを設定し、マウスをのせたとき枠を表示させたいのですが・・・参考イメージ http://www.mapion.co.jp/map/japan.html

roomba
お礼率0% (0/3)

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

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

みんなの回答

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

2011/05/18 16:42 回答No.3

暇なのでちょっと遊んでみた。座標さえわかればとっても簡単で色々応用が利く。画像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>

ログインすると、全ての回答が全文表示されます。

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

2011/05/16 23:09 回答No.2

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

ログインすると、全ての回答が全文表示されます。

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

2011/05/16 22:59 回答No.1

imagemapではないでしょう。・・imagemapでしたら、 13.6 イメージマップ ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#h-13.6 ) に詳しく書いてあります。　スタイルシートで行うほうが簡単です。 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;} とか・・・　

ログインすると、全ての回答が全文表示されます。