テーブルの背景画像にリンクを設定したい

質問

ナビゲーションボタンを配置するのに、テーブルで、
tdの背景画像として同じ画像を設定しました。
メニューはテキストで記述しました。
そのテキスト部分ではなく、背景画像にリンクを
設定したいのですが、できますでしょうか。
テキストは左寄せで短いものもあるので、
テキストリンでは、ボタンの右の方をクリックしても
リンクせず、使い勝手が悪いかと思いまして・・。
文字も込みの画像でボタンを作るとどうも鮮明でない
ような気がしたので、このようなやり方にしようかな
と考えたのですが、何かいいアドバイスありましたら
よろしくお願いします。

回答No.3

goldfox · ベストアンサー

NO。2の方法は、文法的にも間違ってますし、リンクされないブラウザがあります。

td内全体を一つのリンクとするなら、マウスイベントのonclickをtdにつけてはいかがでしょう。
<td background="画像" style="cursor: pointer;" onclick="location.href = 'link.html'">
<a href="link.html" style="text-decoration: none;">リンク</a></td>
これはJavaScriptオフの環境では動かないので、保険にテキストにも<a>でリンクをつけておいたほうがいいかと。

スマートなのは、そのボタンとなる部分を切り取って、テキストを載せてリンク用ボタン画像を作ることだと思います。
で、<td>～</td>の中にimgでいれてそれを<a>でリンクする。

お礼

ありがとうございます。
やっぱりスマートなのはボタン画像に文字も入れちゃう方法ですよね。
まずはNo1さんのアドバイスを参考にボタン画像を作ってみようと思います。
不鮮明さが気になるようなら、JavaScriptでいってみます。

回答No.2

Bonjin

IEなら<td>～</td>をAタグで囲っちゃえばセル自体にリンクが張られますけど、他のブラウザはどうなんでしょう・・・

<a href="適当"><td>テキスト</td></a>

お礼

ありがとうございます。
これが一番てっとり早そうでうれしいんですが、
ブラウザによるとのことなので、今回は別の方法使用と思います。

回答No.1

steel_gray

背景へのリンクの設定ではありませんが、スタイルシートでリンクをボックス化する手法があります。
(ただし、縦方向の配置は思い通りにならないかも)

例
td a{
display:block;
text-decoration:none;
width:100px;
padding:5px;
}

<td><a href="～"><リンク</a></td>

>文字も込みの画像でボタンを作るとどうも鮮明でない
ような気がした
画像編集ソフトで文字を入れるときに、アンチエイリアス（※）をOFFにするとにじみのない文字が入れられます。
※使用しているソフトによって呼び方とかは違うかも。

お礼

早速のご回答ありがとうございます。
＞スタイルシートでリンクをボックス化
そういうやり方があるんですね。
縦の高さは制御できないようなので、今回は別の方法でやってみます。

にじみのない文字の入れ方も教えていただいてありがとうございます。
まずはこの方法を試して見たいと思います。