画像の中にリンク先のページを表示するには

質問

初めて利用させて頂きます。
画像の中に座標を使う原理でリンクを飛ばし、そのリンク先を同じページに表示をするにはどうすればよいでしょうか？

文字をクリックすると点線の中にそのリンク先を飛ばせるようにしたいのです。

タグで出来る方法を教えてください。よろしくおねがいします！

回答No.1

noname#22328

まず、画像にリンクを設定するには、イメージマップを使います。
こちらと http://www.htmq.com/html/map.shtml、こちら http://www.htmq.com/html/area.shtml を読んで下さい。

次に点線の中にリンクを表示するには、Javascriptで、レイヤーを表示／非表示させるか、
インラインフレームを利用します。インラインフレーム＝http://www.htmq.com/html/iframe.shtml
インラインフレームの方がハードルが低いので、こちらで説明します。

■画像ファイルの設定タグ
<img src="IMAGE.jpg" border="0" usemap="#MAP" alt="イメージ">
<map name="MAP">
<area href="LINK1.html" target="iFRAME" shape="rect" coords="800,200,860,220">
</map>

■インラインフレームの設定タグ
<iframe name="iFRAME" title="CONTENTS" src="TOP.html" width="240" height="220" frameborder="0" border="0">
インラインフレーム否対応のブラウザに対するメッセージを書きます
</iframe>