ホームページのイメージマップについて質問です。

質問

1枚の建物のフロア画像があり、これをイメージマップにして、各場所（トイレ、会議室など）の名前をクリックすると画像の下のスペースに説明（テキスト）が表示される、というようにしたいのですが、どうもできません。
リンク先が別ページ、または同ページ下にアンカーリンクでそこに移動なら出来るのですが・・・。
htmlとcssだけでは不可能でしょうか？
可能であれば、やり方がわかる方、教えて下さい！

回答No.3

coai

#2です、御礼を読みましてリンク先を確認すると…

<div onclick="obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none';">

javascript使ってるじゃん!!

いや、元記事は誤解を招く書き方なので、仕方ないとは思いますがね。

javascriptを使っていいなら、なんぼでも書き方はある

手抜きだが、以下のような感じとかね
<a href="#" onclick="document.getElementById('setumei').innerHTML = 'aaaa';">A</a>
<a href="#" onclick="document.getElementById('setumei').innerHTML = 'bbbb';">B</a>
<a href="#" onclick="document.getElementById('setumei').innerHTML = 'cccc';">C</a>
<a href="#" onclick="document.getElementById('setumei').innerHTML = 'dddd';">D</a>
<div id="setumei"></div>

お礼

ご回答ありがとうございます。
お返事が遅れましてすみません。
教えて頂いた方法で早速やってみます！
ありがとうございました！

回答No.2

coai

『画像の下のスペースに説明（テキスト）』部分をiframe内に記述して、リンクにターゲットを指定すればできなくもありませんが…

ただし、普通はjavascriptを使うことを考えるような内容ですね。
あるいは、そもそも論でやりたい事とやる方法を考え直した方が良い気がしますね。

お礼

ご回答ありがとうございます。やはりiframeを使うしかないでしょうか。

テキストをクリックして詳細を表示するなら、こちらのサイト＜http://fukafuka295.jp/hp/hp_no10.html＞のようにＣＳＳだけでも実現できたのですが、イメージマップでは無理でしょうかね…。

回答No.1

noname#212058

以下のページで方法を解説されています。
http://www.tagindex.com/html_tag/img/img_map.html

お礼

ご回答、ありがとうございます。こちらのサイトはイメージマップを作成の際、拝見させて頂いたのですが、リンク先が別のページに飛ぶようになっております。
今回は、同ページ内に、初めは何も表示されていない状態で、イメージマップをクリックするとテキストが表示される、というふうにしたいのですが、上手くいかないのです・・・