-3

マスターページファイルにリンクを設定する必要があります。そこで、表の列 ( <td>) の背景画像を設定し、「ホーム」として別のフォントを指定します。今、私は「onclick」イベントをセットアップし、からページにリダイレクトします<td>。ただし、ブラウザの画像の下部にスペースがいくつかあります。したがって、リンク（手の記号）は下の空白からボタン画像に始まります。すべてのマージン設定、パディングなどを確認しましたが、うまくいきません。だから今、背景画像のhrefを設定することにしました。この問題を修正することは可能ですか、それとも他の方法ですか? 私はインターネットでいくつかの助けを見つけました。しかし、このコードの使い方がわかりません。この投稿にヘルプ コードを添付しました。

私のコード:

<tr style="height:44px;">
            <td id="Homebutton" runat="server" style="height: 44px; width: 101px; cursor: pointer;"
                class="menubuttonhome" align="center" onclick="navigate(id)" onmouseover="this.className='menubuttonhomefocus'"
                onmouseout="this.className= 'menubuttonhome'">
                Home
            </td>
</tr>

cssファイル

.menubuttonhomefocus
        {
            background-image: url('Images/homebuttonfocus.png');
            background-repeat: no-repeat;
            vertical-align: top;
            color: White;
            padding-top: 11px;
            font-family: Arial;
            font-size: 10pt;
            font-weight: 500;
        }

インターネットからのヘルプ コード

a.particular-link {display: block; /* or inline-block; I think IE would respect it since a link is an inline-element */
                   background: #fff url(path/to/image.gif) top left no-repeat; 
                   text-align: center;
                   line-height: 50px; }
4

2 に答える 2

0

Jukka が既に述べたように、CSS を介して適用された背景画像へのリンクを設定することはできません。

<a>代わりにタグを使用する必要があります。トリックは、リンクの高さを画像の高さに強制することです。

例：

<!DOCTYPE html>
<html>
  <head>
    <title>Image link</title>
    <style type="text/css">
      td {
        padding: 0;
      }
      a {
        display: block;
        height: 89px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td style="background-color: blue;"><a href="#asdf"><img src="http://getfirebug.com/img/firebug-logo.png" style="background-color: yellow;"/></a></td>
      </tr>
    </table>
  </body>
</html>

ただし、レイアウトにテーブルを使用しないでください。テーブル レイアウトを使用しない正当な理由がいくつかあります。<div>代わりに、s、 s、<header>s などを使用できます<section>。

于 2012-05-02T09:51:19.163 に答える
0

HTML

<tr>
  <td id="Homebutton" runat="server" class="menubutton">
    <a href="home.html">Home</a>
  </td>
</tr>

CSS

td {
  padding: 0;
}

.menubutton > a {
  display: block;
  width: 101px;
  height: 44px;
  background-repeat: no-repeat;
  vertical-align: top;
  padding-top: 11px;
  color: white;
  text-align: center;
  font-family: Arial;
  font-size: 10pt;
  font-weight: 500;
  cursor: pointer;
}

#Homebutton {
  background-image: url(Images/homebutton.png);
}

#Homebutton:hover {
  background-image: url(Images/homebuttonfocus.png);
}

:hoverホバー効果については、疑似クラスを使用するだけでよいことに注意してください。

ところで。画像の下部のスペースはテキスト用に予約されています。つまり、テキストを書いた場合、それは画像の下に表示されます。

于 2012-05-02T10:28:04.187 に答える