3

私のウェブサイト（XHTML）用にインタラクティブなゴルフスコアカードを作成する予定です。（ところで、そのようなスコアカードはどのように見えるか：ScoreCard）。したがって、最後に、Webサイトの仮想スコアカードの適切な入力フィールドに各穴のスコアを挿入できるようにする必要があります。私にとって、インタラクティブスコアカードが元の（紙の）スコアカードと実際に同じように見えることが非常に重要です。そのため、私の最初のアプローチは、スコアカード画像をスキャンしてスライスし、その外観に到達することでした。

ここで、私が画像をスライスした方法を見ることができます：

ここに画像の説明を入力してください

アイデアは、次のような結果になる各スコアフィールドにHTMLテキスト入力を挿入することでした。

ここに画像の説明を入力してください

画像をスライスした後、HTMLを使用して再構築しました。そのために、画像スライスをセルの背景として配置します。

<table>
  <tr>
    <td style="background: url("slice1.jpg") width="58px" height="25px">
      <input type="text"></inputText>
    </td>
  </tr>
  ...
</table>

最初の瞬間、これはうまくいきました（Gimpはこれに非常に優れた機能を提供しているため）。次に問題は、正確なレイアウトを作成するためにHTMLテーブルを作成する必要があることでした。ご覧のとおり、レイアウトの下部は3列に分割されています。中央の列は、いくつかの（穴ごとに）行に分割されています。したがって、左右の列はこれらの行にまたがる必要があります。ついにそれはうまくいきましたが、それはある種のスケーリングの問題につながります。テーブルをズームインまたはズームアウトすると、中央の列（およびその1つだけ）が正しく拡大縮小されません。私はこれを修正することができないので、これがhtml画像の仮想化に適切な手法であるかどうか疑問に思い始めます。私はウェブサイトの作成の専門家ではないので、これについて助けていただければ幸いです。たぶん、それを行うための完全な他のより良いテクニックがあります、私が思うに、それはウェブクリエーションの一般的な仕事です。その上で良い例やチュートリアルを見つけることができませんでした。

4

2 に答える 2

2

何も欠けていない限り、この効果を得るために画像スライスや画像をまったく使用する必要はありません。これはすべてプレーンな CSS で行うことができます。

これを実現する方法の大まかな例を次に示します。

http://jsfiddle.net/Curt/wxFtJ/

于 2012-06-19T09:09:26.697 に答える
0

これで、1 つの行を持つ 1 つのテーブルと、背景画像を持つ 1 つの大きなセルができました。HTML テーブルを次のようにしたいということですか。

<table>
<tr>
<td colspan="3">One row</td>
</tr>
<tr>
<td colspan="3">One row</td>
</tr>
<tr>
<td colspan="3">One row</td>
</tr>
<tr>
<td colspan="3">One row</td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>

基本的な HTML テーブルのスタイリングについては、http ://www.w3.org/TR/CSS2/tables.html を参照してください。

また、テーブルを作成するために画像をスライスするべきではありません。

于 2012-06-19T09:13:08.503 に答える