画像にリンクの文字を重ねる方法

質問

こんにちは。
ブログのトップページの上段に画像を配置して、右上に文字でメニューのようなものを配置したいと思っています。

画像に文字を重ねて、文字をクリックするとジャンプするようなイメージです。

一つの文字を重ねる事はできたのですが、複数の文字を右へ増やしていく事ができません。
画像の右上に
| リンク1; | リンク2; | リンク3; |
のようなイメージです。

現状のHTMLは以下です。

<a href="飛ばすURL" style="display:block; text-align:right; width:910px; height:100px;
background: url(http://画像のURL); no-repeat;">リンク先1;</a>

お手数ですがご教授お願いします。

回答No.4

xs200

<ul style="padding: 3px 0; margin-left: 0; border-bottom: 1px solid #669;">
<li style="list-style: none; margin: 0; display: inline;"><a href="#" style="padding: 3px 0.5em; margin-left: 3px; border: 1px solid #669; border-bottom: none; background-image: url(x.jpg); text-decoration: none;">リンク1</a></li>
<li style="list-style: none; margin: 0; display: inline;"><a href="#" style="padding: 3px 0.5em; margin-left: 3px; border: 1px solid #669; border-bottom: none; background-image: url(x.jpg); text-decoration: none;">リンク2</a></li>
<li style="list-style: none; margin: 0; display: inline;"><a href="#" style="padding: 3px 0.5em; margin-left: 3px; border: 1px solid #669; border-bottom: none; background-image: url(x.jpg); text-decoration: none;">リンク3</a></li>
</ul>

回答No.3

noname#119957

フロート：回り込みついて学習してください。

全体を、
<div style="display:block; text-align:right; width:910px; height:100px;background: url(http://画像のURL)>
<a href="飛ばすURL" style="float:right">リンク先1;<
</a>
<a href="飛ばすURL2" style="float:right">リンク先3;<
</a>
<a href="飛ばすURL3" style="float:right">リンク先1;<
</a>
</div>
**
位置関係は、<div>のパディングと<a>のパディングやマージンで調整してください。各種ブラウザで確認して表示が変なら訂正してください。

回答No.2

salonpath

aタグだけじゃソースが足りないです
メニューを包む親要素あたりまであったら、適切な回答がつくとおもいます

とりあえず横並びさせるにしてはwidth多すぎじゃないかな？

回答No.1

mendokusa

画像上に文字を書いて、その画像を分割するのがてっとりばやいような。
で、各々にリンクを作成。