- ベストアンサー
クリカブルマップのリンクが反映されない
- htmlでクリカブルマップを使ってページを作ろうとしています。画像は表示されるが、リンクが機能しない問題が発生しています。
- マウスカーソルを画像の上に置いても反応せず、クリックしてもダメです。座標値やスペルに間違いはありません。
- 何が原因で反映されないのかわからないため、助けていただきたいです。初心者ですので、分かりやすく教えていただけると助かります。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
これが動作しない理由は単純に <area shape="rect" href="profile.html"□coords="274,98,417,118"> と□の部分が、全角スペースであるためです。 1) 全角スペースと半角スペースが見分けられるテキストエディタを使う良いです。 2) Vaidator使いましょう。 Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )のDATAタブ しかし、それ以前に、HTMLにたくさんの間違いがあります。参考にされているサイトは、とっても古く、間違いも多いようです。 <body bgcolor="#ffffff"> <!-- bgcolorは非推奨です。( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/present/graphics.html#adef-bgcolor )--> <center> <!-- centerは非推奨でHTML4.01strict以降のHTMLではありません( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/present/graphics.html#edef-CENTER ) --> <img src="○○○.jpg" usemap="#△△△" border="0"> <!-- img要素は行内要素です。またwidth,height,alt要素は必須,borderは非推奨( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/objects.html#adef-border-IMG ) --> <body> <p class="imageMap"> <img src="○○○.jpg" usemap="#△△△" width="800" height="600" alt=""> </p> <map name="△△△"> <area shape="rect" href="profile.html" coords="274,98,417,118"> <area shape="rect" href="gallery.html" coords="720,559,793,573"> </map> </body> とかです。 なお、最近はiamegemapを使わず、普通にHTMLを作成してスタイルシートを使うほうが多いでしょう。特にrectですむ場合は!! <body> <div class="header"> <h1>タイトル</h1> <div class="nav"> <ol> <li><a href="/">TOP</a></li> <li><a href="profile.html">Profile</a></li> <li><a href="gallery.html">Gallery</a></li> </ol> </div> </div> <div class="section"> <h2>本文</h2> </div> <div class="footer"> <h2>文書情報</h2> </div> </body> として、スタイルシートでデザインします。こうしておけば、全く異なるデザインにすることも、もっとインタラクティブに表現することも可能ですし、検索エンジン対策も優れています。 ★HTMLにはデザインに関わること一切書かなければ、自由にデザインできます。 ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) にて、ブラウザの表示メニューから[スタイルシート]に進み、任意のスタイルを選択するか印刷プレビューで、スタイルシートひとつ書き換えるだけで自由にデザインできることが分かります。 [画像の上に配置]が、下記のサンプルと似た方法です。 HTML4.01strict+CSS2.1のサンプル ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html ) のDATAでチェック済み ★タブは＿に置換してあるので戻すこと ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ <!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"> <!-- div.header div.nav{ width:800px;height:600px; margin:0 auto; background-image:url(./images/sample800-600.jpg); position:relative; } div.header div.nav ol,div.header div.nav ol li{ display:block;list-style:none; margin:0;padding:0; text0align:center; } div.header div.nav ol li{ position:absolute; top:10px;left:10px; width:60px; } div.header ol li a{ display:block; border:outset 2px white; text-indent:-10em; overflow:hidden; } div.header div.nav ol li.profile{ width:113px;height:20px; left:274px;top:98px; } div.header div.nav ol li.gallery{ width:73px;height:14px; left:720px;top:559px; } div.header ol li a:hover{border-color:red;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/">TOP</a></li> ＿＿＿＿<li class="profile"><a href="profile.html">Profile</a></li> ＿＿＿＿<li class="gallery"><a href="gallery.html">Gallery</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>本文</h2> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>
お礼
ご回答ありがとうございますっっ！！ （１）の通り半角に直しましたらちゃんとリンクされました。まさか全角スペースだったとは・・・ちゃんと見れてなかった自分が恥ずかしいです。 いろいろと対策も教えていただきありがとうございます。勉強していきます(>_<) 感謝感謝です！！