イメージマップで文章を表示したい。

解決済

質問者：genko0815
質問日時：2013/10/25 12:29
回答数：3件

下記の例のように、「map.gif」という画像の各箇所ごとにそれぞれのリンクを貼るのは下記の方法で出来ると思うのですが、「coords="22,11,122,62"」にマウスが乗ったときに指定した箇所に文章を表示するにはどうしたらよいのでしょうか？
※それぞれの箇所によって、それぞれ違った文章を表示したいです。
※「map.gif」という画像が表示されている上段（下段でもＯＫ）に枠を作って、その中に説明文が表示される仕組み。

<img src="map.gif" alt="サンプル" usemap="#sample">

<map name="sample">
<area shape="rect" coords="22,11,122,62" href="map1.html" alt="リンク1">
<area shape="circle" coords="184,86,30" href="map2.html" alt="リンク2">
<area shape="poly" coords="87,78,30,110,81,139,69,113" href="map3.html" alt="リンク3">
<area shape="default" href="map4.html" alt="リンク4">
</map>

宜しくお願いします。

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： ORUKA1951
回答日時：2013/10/29 19:24

こっちのほうが簡単、良くみりゃ<ul><li>は意味ない。

<!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">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<div class="nav">
＿＿＿<h3>カメラの説明</h3>
＿＿＿<dl>
＿＿＿＿<dt><a href="map1.html" alt="リンク1">レンズ</a></dt>
＿＿＿＿<dd>被写体からの光を集めてフィルムに像を作る。</dd>
＿＿＿＿<dt><a href="map2.html" alt="リンク2">シャッターボタン</a></dt>
＿＿＿＿<dd>シャッターを開けて撮影する。</dd>
＿＿＿＿<dt><a href="map3.html" alt="リンク3">ファインダー</a></dt>
＿＿＿＿<dd>撮影する目標を決める。</dd>
＿＿＿</dl>
＿＿</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>

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2013/10/29 19:15

No.1です。

＞一枚の画像に、四角形の選択領域が複数ある仕様でよいので、教えていただけないでしょうか？
　HTMLがわからないので示しようがないのですが、HTMLさえちゃんと書かれていたらスタイルシートで好きに細工できます。
　時間が取れたので、良い練習になるので遊んでみました。次のような説明文であるHTMLがあるとします。
★単純な定義リストを使ったナビゲーションです。
　ポイント*HTMLには文書構造だけを率直に書く。検索エンジンもスクリーンリーダーも理解できるし、自分がとにかく楽です。
★イメージマップでは出来ない画像の変更も使ってあります。
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　も参考になるでしょう。
★タブは＿に置換してあるので戻す。
<div class="nav">
＿<h3>カメラの説明</h3>
＿<ul>
＿＿<li>
＿＿＿<dl>
＿＿＿＿<dt><a href="map1.html" alt="リンク1">レンズ</a></dt>
＿＿＿＿<dd>被写体からの光を集めてフィルムに像を作る。</dd>
＿＿＿</dl>
＿＿</li>
＿＿<li>
＿＿＿<dl>
＿＿＿＿<dt><a href="map2.html" alt="リンク2">シャッターボタン</a></dt>
＿＿＿＿<dd>シャッターを開けて撮影する。</dd>
＿＿＿</dl>
＿＿</li>
＿＿<li>
＿＿＿<dl>
＿＿＿＿<dt><a href="map3.html" alt="リンク3">ファインダー</a></dt>
＿＿＿＿<dd>撮影する目標を決める。</dd>
＿＿＿</dl>
＿＿</li>
＿</ul>
</div>
このナビゲーションをカメラの写真の上に配置して、デザインしたいとします。説明は写真の下に表示させることを考えます。
添付の画像をHTMLと同じディレクトリにimages/というフォルダーにcamera.jpgとして保存します。420×314になるはず。

<!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">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<div class="nav">
＿＿＿<h3>カメラの説明</h3>
＿＿＿<ul>
＿＿＿＿<li>
＿＿＿＿＿<dl>
＿＿＿＿＿＿<dt><a href="map1.html" alt="リンク1">レンズ</a></dt>
＿＿＿＿＿＿<dd>被写体からの光を集めてフィルムに像を作る。</dd>
＿＿＿＿＿</dl>
＿＿＿＿</li>
＿＿＿＿<li>
＿＿＿＿＿<dl>
＿＿＿＿＿＿<dt><a href="map2.html" alt="リンク2">シャッターボタン</a></dt>
＿＿＿＿＿＿<dd>シャッターを開けて撮影する。</dd>
＿＿＿＿＿</dl>
＿＿＿＿</li>
＿＿＿＿<li>
＿＿＿＿＿<dl>
＿＿＿＿＿＿<dt><a href="map3.html" alt="リンク3">ファインダー</a></dt>
＿＿＿＿＿＿<dd>撮影する目標を決める。</dd>
＿＿＿＿＿</dl>
＿＿＿＿</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>

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2013/10/26 18:11

javascriptを使えば出来なくはないでしょうが・・・・

イメージマップの処理は細かい部分でブラウザ間に差が大きく、うまくは出来ないです。
ちなみに、areaを使う限りは不可能なことは分かりますよね。area要素は、(img同様)内容を持たない要素ですから、内容の追加も出来ません。
<p><img src="./images/map1.jpg" width="420" height="314" usemap="#sample"></p>
<map name="sample">
　　<ul>
　　　　<li><a shape="rect" coords="40,20,180,120" href="map1.html" alt="リンク1">あいうえお</a></li>
　　　　<li><a shape="circle" coords="300,150,80" href="map2.html" alt="リンク2">かきくけこ</a></li>
　　　　<li><a shape="poly" coords="125,140,200,195,172,284,78,284,49,195" href="map3.html" alt="リンク3">さしすせそ</a></li>
　　</ul>
</map>
　普通にareaを使わなかったら、Operaでは何とか可能です。IEは一部、firefoxは無理

　もし四角形の領域でよいのでしたら、単純にCSSだけで実装できます。そのほうがよいかと思います。