javascript - 使用 javascript/jquery 动态修改图像并放置文本

Question

我有上面的图片。我的任务是动态更改 L、A 和 B 出现的值；我必须删除/隐藏 L、A 和 B 并使用数值替换它。我使用烟花制作了 L、A 和 B 所在区域的切片，并将其导出为 HTML 文件。我的想法是为所有三个切片/区域定义 id，使用 jquery 获取 id 隐藏区域，然后在现有区域上显示所需的值。我可以隐藏值 L、A 和 B，但我无法在这些定义的区域上显示值（每个区域都是一个表）。我不知道我是不是在绕圈子，因为我不是网络开发人员。如果有更简单的方法，我很乐意知道。

Answer 1

好的，如果每个区域都是一个表格单元格，那么您需要做的是在要更改内容的点处创建一个空单元格，您为此（单元格）声明一个id，并使用纯JS或jquery（更容易)，更改其内容。喜欢：

<td id="was_L">

...

$("#was_L").val('15')

....

也许您还必须使用样式设置此单元格的大小以保持表格看起来不错。喜欢：

<td id="was_L" style="width:100px; height:100px">

Answer 2

您不能很容易地在 javascript 中修改图像。您可以通过将图像分成多个图像来解决您的问题，除了一个透明地位于基础图像之上，然后您可以更改/隐藏/显示顶部图像以完成您想要的。

使用透明覆盖的 PNG 图像可能比替换单个切片更好。而且，它更加灵活，因为基本图像只需要出现在一个图像中，而其他图像只能包含它们应该代表的内容。

您将在相对容器内使用绝对定位来定位重叠的图像或重叠的文本对象。

例如，这将在一个重叠的文本上创建一个带有两个重叠图像的背景：

<div id="container>
    <img id="overlay1" src="xxx.png">
    <img id="overlay2" src="yyy.png">
    <div id="text1">Some Text</div>
</div>

然后是一些像这样的CSS：

#container {
    position: relative;
    height: 400px;
    width: 300px;
    background-image: url(bbb.jpg);
}

#overlay1 {
    position: absolute;
    top: 20px;
    left: 50px;
    z-index: 1;
}

#overlay2 {
    position: absolute;
    top: 150px;
    left: 150px;
    z-index: 1;
}

#text1 {
    position: absolute;
    top: 300px;
    left: 150px;
    z-index: 2;
}

在任何时候，您都可以隐藏或显示单个组件或更改文本。例如，要隐藏文本元素，您只需使用：

$("#text1").hide();

要更改文本，您应该只使用：

$("#text1").html("Different Text");