画像をリンクボタンにして文字を重ねる方法

こんばんは。
画像をリンクボタンにして文字を重ねる方法を教えていただきたいのですが。
どういえば良いのかわからなかったので、こういう題名になりましたが、ちがうかもしれないので、まねしたいページのアドレスを置いときます。
http://open2.sesames.jp/bananag/html/_TOP/
このページの「サービス一覧」のランにある「ＪＩＦＴ」ですが、
画像の上に文字がかかってます。それでもって画像,文字をクリックするとURLへジャンプするみたいなのです。
これをまねしたいです。
やり方を教えてください。

No.3 ベストアンサー 回答者： naokita 回答日時： 2009/01/24 02:30

ボタン画像を用意して背景にします。

その中（上）にリンクテキストを書くだけ。
ここの質問サイト画像を参考に初心者用に簡単にサンプル化してみましたので
意味がわかれば応用です。後は自分なりに綺麗に装飾して下さい。
以下をHTMLに貼り付け表示してみる。

<a href="[URL]" style="display:block; text-align:center; width:200px; height:30px;
background: url(http://oshiete1.goo.ne.jp/images/button_question … no-repeat;">リンク先へ</a>

この回答へのお礼

ありがとうございました。したいことができました。

お礼日時：2009/01/24 13:30

No.2 回答者： ORUKA1951 回答日時： 2009/01/23 23:29

そのサイトは、HTML的には参考にされないほうがよいと思います。

酷いソースです。
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )

　それはさておき、これは簡単に出来ます。
たとえば、リンクの一覧(リスト)ですと、くかもりは正しくは、
<ol>
<li><a href="[URI]">リンク先1</a></li>
<li><a href="[URI]">リンク先2</a></li>
<li><a href="[URI]">リンク先3</a></li>
</ol>
となるべきですね。
　それをスタイルシートで
ol{
width: 300px;
border: solid 2px red;
}
li{
display:block;
margin:5px,10px;
padding:0px;
}
ol>li>a{
display:block;
border:outset 4px red;
・・・・
と指定していけばよい。
　とても良く使われる方法です。ポインターを上に乗せると色が変わったり、背景画像を入れ替えたり・・・

　とても良く使われるテクニックなので
【参考サイト】
リンクリストを画像ボタンに CSS OR スタイルシート - Google 検索
　 http://www.google.co.jp/search?hl=ja&q=%E3%83%AA …
　で検索してみてください。

この回答へのお礼

ありがとうございました。参考にさせていただきます。

お礼日時：2009/01/24 13:29

No.1 回答者： fujillin 回答日時： 2009/01/23 20:41

ボタンの部分は、背景画像の上に普通に文字を表示しているようです。

（タイトルの文字部分は、文字も含めて全部画像です）

<div>などの背景をCSSで設定しておいて、その中に通常のリンクタグを入れておけばよろしいかと…

この回答へのお礼

ありがとうございました。参考にさせていただきます。

お礼日時：2009/01/24 13:28