画像の上に文字をのせ、ボックス全体にリンクを設定したい　CSS&HTM

解決済

質問者：nanaringo
質問日時：2010/06/23 19:39
回答数：4件

画像の上に文字をのせ、ボックス全体にリンクを設定したい　CSS&HTML
お世話になっております。
ある画像の上にposition:rerative;を使って文字をのせています。
この画像にリンクを設定したいのですが、文字の上になるとリンクが効かなくなってしまいます。文字も含めた全体にリンクをかけることはできるのでしょうか？

下記ソースです。
/*css*/
img.button{/*画像*/
margin:0px 0px 8px;
padding:2px;
border:#999999 1px solid;
}
.text{/*画像上の文字*/
margin:0px;
padding:0px;
font-size:14px;
text-align:left;
}


<div style="position:relative;">
<a href="index.html"><img src="image/photo1.jpg" alt="" width="346" height="98" border="0" class="button"/></a>
<div style="position:absolute; left: 24px; top: 13px; width: 217px;">
<p class="text">画像上の文字</p>
</div></div>

検索してdisplay:block;などのやり方を試してみたのですが、position:relative;を使っているからか？うまくいきませんでした。

お知恵をお借りできれば幸いです。どうかよろしくお願いいたします。
表現の仕方や言葉の使い方を間違っていたらすみません…。

通報する

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

質問の本文を隠す

回答 (4件)

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

No.1ベストアンサー

回答者： grumpy_the_dwarf
回答日時：2010/06/23 19:56

だって、「画像上の文字」と書いてある段落はリンクに含まれてま

せんからね。場所を重ねただけじゃダメですよ。</a>の位置をもっ
と後ろ、最後の</div>の直前に移動しましょう。

<p class="text">画像上の文字</p>
</div></a></div>

それだけです。

- 0
- 件

通報する

この回答へのお礼

早速のご回答ありがとうございます！
</a>の位置を移動するだけでできるとは感激です。
こんなにスマートに解決して下さってありがとうございます。
とても勉強になりました。もっとがんばります。

また機会がありましたらどうぞよろしくお願い致します。
ありがとうございました。

通報する

お礼日時：2010/06/24 11:09

No.4

回答者： ORUKA1951
回答日時：2010/06/24 12:30

＞下記の通り、今回はNo.1さまの方法で対応させていただきました。

　それは絶対にダメ。最悪の対処です。説明したように他のブラウザでは表示できません。文法的に間違っているからです。

- 0
- 件

通報する

この回答へのお礼

度々ご回答ありがとうございます。
ベストアンサーがどうのこうのと書いておきながら締め切るのを忘れていて今見にきたらこんなメッセージが！
締め切らなくて良かったです。

＞<a href="[URL]"><div></a>なんてことは、さすがにHTMLを少しでも知っていれば、できないことは自明です。
これはそういう意味だったのですね。失礼しました。

もう一度勉強して出直します。
ありがとうございます。

No.1さまにも申し訳ありません。皆さんにとても感謝しています。

通報する

お礼日時：2010/06/24 19:56

No.3

回答者： ORUKA1951
回答日時：2010/06/23 22:07

<a href="[URL]"><div></a>なんてことは、さすがにHTMLを少しでも知っていれば、できないことは自明です。

<!ELEMENT A - - (%inline;)* -(A) -- anchor -->
12.2 A要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　ブラウザは、次に<div>や<p>が現れたとき、その直前で</a>と閉じられていると解釈するでしょうが・・(IEは間違った解釈をする)・・・。

　ですから、「ボックス全体にリンクを設定したい」はできませんが、画像は行内(inline)要素
<!ELEMENT IMG - O EMPTY -- Embedded image -->
ですから、画像全体にリンクを埋めることはできます。

　この場合、ソースの｛class="button"/>｝から、リンクのための画像ボタンですから、
<p class="anchorIMG">
　<a href="[URL]"><img src="[URL]" width="346" height="98" alt="・・へのリンク"><span>文字</span></a>
</p>

ですね。他の段落と区別したいので<p class="anchorIMG">としてある。

CSSは、
p.anchorIMG{position:relative;}
p.anchorIMG a span{display:block;position:absolute;left:24px;top:13px;}
とすればよいです。
他の場所のspanには適用しないので、
p.anchorIMG
　└a
　　└span
のspanに対して適用されるようにセレクタを記述した。
また詳細度は1+10+1+1=13である。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
下記の通り、今回はNo.1さまの方法で対応させていただきました。
ORUKA1951さまがお教えくださった方法も試してみたいと思うのですが、恥ずかしながらぱっと拝見した段階では私に理解できそうにないです…。

でも、一つずつ確認しながらトライしてみますね。
勉強させていただき、ありがとうございます。
いただいた3つのアドバイス、どれも本当に勉強になったのですがやむを得ず先着順にベストアンサーをつけさせていただきました。申し訳ありません。どうかご勘弁下さい。

また機会がありましたらよろしくお願いいたします。

通報する

お礼日時：2010/06/24 11:23

No.2

回答者： zeff#1
回答日時：2010/06/23 20:32

そういう場合は背景画像にしましょう。

aをdisplay:blockにして、
height:100%;でリンクを画像全体に反応させます。

<style type="text/css">

</style>
</head>
<body>
<div>
<a href="index.html">画像上の文字</a>
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
今回はNo.1の方の方法が手軽だったので、そちらにさせていただいたのですが、これも試させていただきました。
背景画像は1/3位模様があるので、文字は2/3までしか載せられません。そのため
div a{
display:block;
height:100%;
padding-top:13px;
padding-left:24px;
text-decoration:none;
}
ここにwidth:217px;と追加したところ、当たり前ですが模様部分にはリンクが反応しなくなってしまいました。
私の少ないCSS知識ではここまでしかできず、せっかく教えて下さったのに申し訳ありません。

もっと勉強がんばりたいと思います。
お忙しいところご丁寧にお教えくださり、ありがとうございました。

通報する

お礼日時：2010/06/24 11:15

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！