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

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

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

一つの文字を重ねる事はできたのですが、複数の文字を右へ増やしていく事ができません。
画像の右上に
| リンク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.1 回答者： mendokusa 回答日時： 2009/07/18 10:48

画像上に文字を書いて、その画像を分割するのがてっとりばやいような。

で、各々にリンクを作成。

No.2 回答者： salonpath 回答日時： 2009/07/18 11:17

aタグだけじゃソースが足りないです

メニューを包む親要素あたりまであったら、適切な回答がつくとおもいます

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

No.3 回答者： noname#119957 回答日時： 2009/07/18 15:43

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

全体を、
<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.4 回答者： xs200 回答日時： 2009/07/18 18:55

<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>