html - 使用正确的 HTML 技术从图像创建 Web 表单

Question

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

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

我们的想法是为每个得分字段插入 HTML 文本输入，结果如下所示:

在我对图像进行切片后，我使用 HTML 对其进行了重建。为此，我将图像切片作为单元格背景。

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

一开始它运行良好(因为 Gimp 为此提供了一个非常好的功能)。然后问题是我必须创建一个 HTML 表格来创建准确的布局。如您所见，布局的下部分为 3 列。中间的列被分成几行(对于每个孔)。所以左列和右列必须跨越这些行。好吧，这终于奏效了，但它会导致某种缩放问题。如果我放大或缩小表格，中间的一列(而且只有那一列)不会以正确的方式缩放。我无法解决这个问题，所以我开始怀疑这是否是 html 图像虚拟化的正确技术。我真的不是创建网站领域的专家，所以我非常感谢这方面的任何帮助。也许有一个完整的其他更好的技术来做到这一点，因为我认为这是网络创建中的常见工作。我找不到任何很好的例子或教程。

Answer 1

除非我遗漏了什么，否则您不需要使用任何图像切片，或者根本不需要任何图像来获得这种效果。这一切都可以用纯 CSS 完成。

这是一个如何实现的粗略示例:

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