Question

我计划为我的网站（XHTML）创建一个交互式高尔夫记分卡。（顺便说一句，这就是这样一个记分卡的样子：ScoreCard）。因此，最后应该能够在网站上的虚拟记分卡中的适当输入字段中为每个孔插入分数。对我而言，交互式记分卡看起来与原始（纸质）记分卡看起来非常重要，因此我的第一种方法是扫描并切片记分卡图像以达到该外观。

在这里你可以看到我切片图像的方式：

enter image description here

我们的想法是为每个得分字段插入HTML文本输入，最后输入如下内容：

enter image description here

在我切片图像后，我使用HTML重建它。为此，我将图像切片作为单元格背景。

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

在第一时间这很好用（因为Gimp为此提供了一个很好的功能）。然后问题是我必须创建一个HTML表来创建确切的布局。如您所见，布局的下半部分分为3列。中间列分为几个（每个孔）行。因此，左列和右列必须跨越这些行。好吧最后这个工作，但它导致某种缩放问题。如果我在桌子上放大或缩小，则中间列（并且只有那个）不会以正确的方式缩放。我无法解决这个问题，因此我开始怀疑这是否是适合html图像虚拟化的技术。我真的不是创建网站领域的专家，所以我真的很感激任何帮助。也许有一个完整的其他更好的技术来做到这一点，因为我认为它是webcreation中的一个常见工作。我找不到任何好的例子或教程。

Answer 1

除非我遗漏任何东西，否则您不需要使用任何图像切片或任何图像来获得此效果。这可以在纯CSS中完成。

这是一个如何实现这一目标的粗略例子：

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

Answer 2

现在有一个表格有一行，一个大单元格带有背景图像。您的意思是您希望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

另外，你真的不应该切片图像来创建一个表。

适当的HTML技术，可以从图像中创建Web表单

2 个答案: