画像上にリンクを貼りたい

質問

みなさん、こんにちは。

今、ホームページのリニューアルを考えています。

フレームで左右のページに分けて、左ページにメニューを載せて、右ページをメインにしたいと思っています。

そこまでの工程は一応分かります。

しかし、左ページ一枚の画像の中に、「profile」や「diary」というコンテンツ名を画像ソフトで載せて、そのコンテンツ名をクリックすると、右ページに反映されるようにしたいのです。

画像ソフトでコンテンツ名を載せることも、自分でできます。

しかし、画像の中に載せてあるコンテンツ名をクリック出来るようにする方法が分かりません。

調べたのですが、ビルダーを使うと簡単だということですが、ビルダーを持っていなくて困っています。

タグなどで、画像上に載せたいくつかのコンテンツ名を、リンクできるようにする方法はありませんでしょうか？

もしお分かりの方がいらしたら、教えてください。

参考になるサイト（できるだけ分かりやすいもの）を教えてくださるだけでも助かります。

どうか、よろしくお願いしますm（__）m

回答No.2

hime_mama · ベストアンサー

クリッカブルマップにしたいということですよね？
簡単に作成できるソフトがあるので、それを使うのが一番手っ取り早いと思いますよ。
http://www.j-skai.com/cmap/index.php

参考URL：

http://www.j-skai.com/cmap/index.php

お礼

お礼をするのが遅れて、本当に申し訳ありません。この回答をいただいたあと、すぐにそのソフトをDLして使ってみたのですが、「こんなに便利なソフトがあるなんて！！」と、大変役に立ちました。すごく簡単にできて、本当に感謝しています。お礼のポイントを500ptぐらいしたい程の、名回答でした。ホントにありがとうございました！！

回答No.6

pi8027

>>1
a要素のtarget属性は、HTMLの仕様書に存在しません。

お礼

HTMLには仕様書というのがあるのですね。あまり詳しく勉強していないので、質問の主旨とは反れていますが、参考になりました。ありがとうございました。

回答No.5

LLLuna

4氏の方法は、問題があります。

http://www.mozilla.gr.jp/standards/webtips0018.html
http://www.mozilla.gr.jp/standards/webtips0025.html
http://www.mozilla.gr.jp/standards/webtips0026.html

何かと難しいことが書かれていますが、要は画像を隙間無く敷き詰められるとは限らないのです。それに、table要素でのレイアウトは推奨されません。

この場合はクリッカブルマップで良いと思うのですが。

ttp://www.umechando.com/tips/25.htm

こちらのページで、クリッカブルマップを作成することが出来ます。（ただしJavaScriptが有効なInternet Explorer4以上限定

ただし、いずれの方法でも問題が生じます。img要素とarea要素には、画像が無効な際に代わりとして表示されるテキストを指定するalt属性が必須ですので、これを怠ると画像が無効な環境では最悪リンクが無効になる問題が発生します。

お礼

テーブル要素では、画像を隙間なく敷き詰められるとは限らないのですね。大変参考になりました。ありがとうございました。

回答No.4

chie65536

No.3の回答のように、クリッカブルマップでも可能ですが、クリッカブルマップは位置を記述するのが面倒です。

もっと簡単な方法があって、画像を複数枚に分割し、テーブルタグを使用して隙間無く画像を並べ、コンテンツ名を載せた部分にだけリンクタグを付ける、と言う方法です。

テーブルタグの枠線幅をゼロに、セルの枠線とセル同士の間隔をゼロに、リンク付きイメージの枠線幅をゼロにすれば、隙間無く画像を並べられます。

画像を複数枚に分割するのも、画像ソフトがあれば可能でしょう。

お礼

５番の方の回答を見て、問題があるようなのですが、２番目の回答で解決してしまったので、逆に申し訳ないです。わざわざありがとうございました。

回答No.3

sr-agent

すみません、誤解しておりました。
イメージマップのほうのようですね。

<img src="gazou.jpg" width="432" height="245" usemap="#gazou" border="0">
<MAP NAME="gazou">
<AREA SHAPE="RECT" COORDS="29, 39, 56, 68" HREF="01.html">
<AREA SHAPE="RECT" COORDS="70, 39, 97, 68" HREF="03.html">
<AREA SHAPE="RECT" COORDS="108, 39, 137, 68" HREF="04.html">
<AREA SHAPE="RECT" COORDS="146, 39, 174, 68" HREF="05.html">
<AREA SHAPE="RECT" COORDS="183, 39, 213, 68" HREF="06.html">
<AREA SHAPE="RECT" COORDS="256, 15, 420, 244" HREF="07.html"></MAP>

絵の特定の位置をクリックすると、どこかの部屋へリンクする機能があります。
一般的に、その機能を持ったマップ（地図）をクリッカブルマップと呼んでいるようです。

この機能を使うためには、その絵の中の特定の位置の座標を知る必要があります。
お手持ちの画像ソフトを立ち上げて、ご自分の絵の特定の位置にカーソルを持っていくと、（a,b）という数字が表示されます。

この絵の左上の角を原点（0,0）とした時の、aという数字がＸ軸の、bという数字がＹ軸の数字です。

そこを始点として、次に終点にしたい位置にカーソルを持っていきます。すると、右下の位置の座標が（c,d）と表示されたとします。<br>（a,b,c,d）というエリアで囲まれた位置をクリックした時に、例えば01.htmlというファイルにリンクさせたい場合には、次のように書きます.

<AREA shape="rect" coords="a,b,c,d" href="01.html">

なお、rectというのは矩形（四角形）の意味だそうです。

この方法でやってみて下さい。

お礼

締め切るのが遅れて、お手間を取らせて申し訳ありません。２番目の方の回答で、問題は解決しました。本当に申し訳ありません。ご丁寧にありがとうございました。

回答No.1

sr-agent

<a href="diary.html" target="main"><img src="diary.jpg" width="88" height="21" alt="diary"></a>
などとされればよろしいのではないでしょうか？

ご参考まで。

お礼

ありがとうございます。ALTとは別の質問でした。スイマセン。