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

質問

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

回答No.3

naokita · ベストアンサー

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

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

お礼

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

回答No.2

ORUKA1951

そのサイトは、HTML的には参考にされないほうがよいと思います。酷いソースです。
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )

　それはさておき、これは簡単に出来ます。
たとえば、リンクの一覧(リスト)ですと、くかもりは正しくは、
<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%E3%83%B3%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%88%E3%82%92%E7%94%BB%E5%83%8F%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AB+CSS+OR+%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=lang_en%7Clang_ja&aq=f&oq=
　で検索してみてください。

お礼

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

回答No.1

fujillin

ボタンの部分は、背景画像の上に普通に文字を表示しているようです。
（タイトルの文字部分は、文字も含めて全部画像です）

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

お礼

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