ここから本文です

画像内リンク(usemap)のリンクができません。 以下のコードですが、恥ずかしい話...

miy********さん

2011/11/1511:07:08

画像内リンク(usemap)のリンクができません。
以下のコードですが、恥ずかしい話原因がわかりません。
(基本的なことかもしれませんが)
コード以外で阻害する要因はありうのでしょうか?

<img src="●●●.png" width="765" height="370" alt="" usemap="#Map" />
<map name="Map">
<area shape="rect" coords="102,580,150,718" href="http://●●.jp" alt="2050" />
<area shape="rect" coords="200,580,240,718" href="http://●●.jp" alt="3000" />
<area shape="rect" coords="300,580,330,718" href="http://●●.jp" alt="13500"/>
</map>

閲覧数:
682
回答数:
1
お礼:
25枚

違反報告

ベストアンサーに選ばれた回答

pot********さん

編集あり2011/11/1512:14:13

coordsの指定の方法が間違っています。
rectの場合、coords=""の値は

coords="左上のx位置,左上のy位置,右下のx位置,右下のy位置"

です。
例えば一番上のareaの場合、
左上のx位置=左から102px
左上のy位置=上から580px(画像のheightが370pxなのでオーバーしている)
右下のx位置=左から150px
右下のy位置=上から718px(画像のheightが370pxなのでオーバーしている)
のようになっていて、画像外の位置を指定している事になっています。

なのでareaを

<area shape="rect" coords="580,102,718,150" href="http://●●.jp" alt="2050" />
<area shape="rect" coords="580,200,718,240" href="http://●●.jp" alt="3000" />
<area shape="rect" coords="580,300,718,330" href="http://●●.jp" alt="13500"/>

に変更すれば大丈夫だと思います。


参考:
画像内に複数リンクを設定する(map要素 area要素)
http://www.tagindex.com/html_tag/img/img_map.html

質問した人からのコメント

2011/11/15 12:57:32

爆笑 ありがとうございました。解決しました。
もう少し勉強します!!!

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる