締切済み

地図全体にリンクをはりたいのですが…

2011/06/01 17:50

添付の地図があります。ホームページを作成していて、尾張地区と三河地区のページを作ります。この地図からリンクして、尾張地区と三河地区へ飛びたいのですが、たとえば三河地区だと黄色の地図全体（2つの半島を含む）をリンクする方法はありますか？各尾張地区や三河地区の文字の部分からはリンクすることができるのですが、全体はできません。 htmlやcssではなく、javaスクリプト等を使うのはわかるのですが、やりかた教えてください。

12_maki
お礼率0% (0/5)

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

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

みんなの回答

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

2011/06/03 00:38 回答No.5

たとえば、あいち観光イベントカレンダー - LET'S GO! あいち愛知の観光情報をブログで発信- ( http://www.lets-go-aichi.jp/calender/index_nishimikawa.html ) の地図( http://www.lets-go-aichi.jp/calender/images/map/calender_map_nmikawa.jpg ) を使うとして、 imagemapが二重に記述してあるのは、Windows版ＩＥが、area以外に対応していないためです。SEOやユーザービリティから、画像なしでもリンク可能なナビゲーションリンクが必要なので<li><a href=""></a></li>ははずせない。もちろん、IEを無視すれば、<area・・・>は消しても良い。 <!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>  <p class="imageMap"><img src="Ｈttp://www.lets-go-aichi.jp/calender/images/map/calender_map_nmikawa.jpg" width="270" height="244" usemap="#map" alt="地図"/></p> <h1>サンプル</h1> <map class="nav" name="map"> <ol> <li><a href="" shape="poly" coords="146,171,146,158,151,155,161,136,193,122,188,100,196,50,207,33,251,18,263,17,257,61,249,91,243,98,214,143,221,185,127,235,129,207,136,205,145,206,179,175,178,163,152,165,152,165,148,176" title="東三河地区">東三河</a></li> <li><a href="" shape="poly" coords="92,148,98,129,114,109,120,106,126,62,147,36,147,26,171,31,195,5,207,32,196,51,189,100,193,122,162,135,152,157,146,158,115,181" title="西三河地区">西三河</a></li> <li><a href="" shape="poly" coords="60,124,95,125,95,137,92,185,108,197,107,206,72,194,72,172,59,157,57,140" title="知多地区">知多</a></li> <li><a href="" shape="poly" coords="43,79,62,72,68,62,90,57,98,64,109,50,116,57,103,76,101,95,103,105,96,125,60,123,38,103,47,96" title="名古屋地区">名古屋</a></li> <li><a href="" shape="poly" coords="4,86,15,32,33,30,53,18,56,7,68,1,68,11,91,31,113,33,118,39,140,26,149,28,146,125,35,124" title="尾張地区">尾張</a></li> </ol> <area href="" shape="poly" coords="146,171,146,158,151,155,161,136,193,122,188,100,196,50,207,33,251,18,263,17,257,61,249,91,243,98,214,143,221,185,127,235,129,207,136,205,145,206,179,175,178,163,152,165,152,165,148,176" title="東三河地区"> <area href="" shape="poly" coords="92,148,98,129,114,109,120,106,126,62,147,36,147,26,171,31,195,5,207,32,196,51,189,100,193,122,162,135,152,157,146,158,115,181" title="西三河地区"> <area href="" shape="poly" coords="60,124,95,125,95,137,92,185,108,197,107,206,72,194,72,172,59,157,57,140" title="知多地区"> <area href="" shape="poly" coords="43,79,62,72,68,62,90,57,98,64,109,50,116,57,103,76,101,95,103,105,96,125,60,123,38,103,47,96" title="名古屋地区"> <area href="" shape="poly" coords="4,86,15,32,33,30,53,18,56,7,68,1,68,11,91,31,113,33,118,39,140,26,149,28,146,125,35,124" title="尾張地区"> </map> <hr> </body> </html>

dscripty
ベストアンサー率51% (166/325)

2011/06/02 13:11 回答No.4

地図画像にベクターグラフィックを使うのはどう？ SVG や VML なら画像の形そのものにリンクをはれるよ。 http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics http://www.tohoho-web.com/wwwvml.htm <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>Vector Graphics</title> <style> v\:* { behavior: url(#default#VML); } </style> </head> <body>   <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <a xlink:href="http://www.w3.org/Graphics/SVG/" xlink:title="circle"> <ellipse cx="41" cy="31" rx="40" ry="30" style="fill:#ffcccc;stroke:red;" /> </a> </svg>    </body> </html>

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

2011/06/01 20:15 回答No.3

＞各尾張地区や三河地区の文字の部分からはリンクすることができるのですが、　余計なことかもしれませんが、これを矩形にする場合でも透明な枠をかけるなんて、非Web標準的なことはしないように・・あくまでマークアップは <div class="nav" id="map"> 　<ul> 　　<li><a href="" class="owari">尾張地区</a></li> 　　<li><a href="" class="mikawa">三河地区</a></li> 　</ul> </div> でなければなりません。その上でCSSで @media screen{ div#map ol,div#map ol liねdiv#map ol li a{ 　list-style:none; 　display:block; } div#map ol{ 　position:relative; 　width:400px;height:400px;padding:0; 　background-image:url() no-repeat 0% 0%; } div#map ol li a.owari{ 　width:200px;height:50px; 　top:20px;left:50px; } div#map ol li a.mikawa{ 　width:250px;height:100px; 　top:40px;left:60px; } } とかです。・・・・HTMLはきちんとマークアップし、スクリーンでの見え方はCSSで・・　この場合矩形になります。なお、CSS3ではpoly見たいな事もできる　

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

2011/06/01 19:09 回答No.2

矩形なら、CSSでできますが、複雑な図形はHTMLを使います。サーバーサイドとクライアントサイドの二通りあります。とても昔からある機能なので、ローカルで問題ないでしょう。 13.6 イメージマップ ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#h-13.6 ) 　仕様書くらい目を通しておきましょう。そのほうがここで聞くより断然早くて正確な情報が得られます。この場合polyですね。