仅使用JavaScript在img上放置文本/Get当前创建的img的位置/Place tex
我需要在箭头（图像）上放置文本。我有图像，但我不知道需要多少次&必须在图像上放置哪些文本（但仅限于12个字符）。最后，我希望有一行表示工作流的箭头 我不能使用HTML5标记-一切都应该用JavaScript完成 我的想法是相对于图像的位置放置文本（使用jQuery）。我的前两次试验（参见//Test1和//Test2）失败了，因为我总是得到每个图像的相同位置：仅使用JavaScript在img上放置文本/Get当前创建的img的位置/Place tex,javascript,jquery,html,Javascript,Jquery,Html,我需要在箭头（图像）上放置文本。我有图像，但我不知道需要多少次&必须在图像上放置哪些文本（但仅限于12个字符）。最后，我希望有一行表示工作流的箭头 我不能使用HTML5标记-一切都应该用JavaScript完成 我的想法是相对于图像的位置放置文本（使用jQuery）。我的前两次试验（参见//Test1和//Test2）失败了，因为我总是得到每个图像的相同位置： var imggrey; var imggreen; window.onload = function(){
var imggrey;
var imggreen;
window.onload = function(){
//for loadImg() see one function further down
loadImg();
var test = $("#imggrey");
var position = test.offset();
//Test1
var imgPosition = position.left + " " + position.top;
$("#test1").text(imgPosition);
//Test2
var htmltest = imggrey.getBoundingClientRect();
imgPosition = htmltest.left + " " + htmltest.top;
$("#test2").text(imgPosition);
};
function loadImg(){
imggrey= new Image();
imggrey.src = "img/grey.jpg";
imggrey.id ="imggrey";
imggreen = new Image();
imggreen.src = "img/green.jpg";
imggreen.id = "imggreen";
document.getElementById("imageDiv").appendChild(imggreen);
document.getElementById("imageDiv").appendChild(imggrey);
};
<body>
<div id="imageDiv">
</div>
<p id="test1"></p>
<p id="test2"></p>
</body>
编辑：我知道代码（比如img创建）看起来不是很酷，它只是一些尝试你可以完全用html来完成。我贴了一张模型
示例文本
如果您必须使用javascript来完成这些操作，那么您可以用几乎完全相同的方式来完成。加载图像，并将其设置在覆盖文本的div上。哇，这是一个多么简单的解决方案！当我成功的时候，我会回来标记你的答案：）
<div id="imageDiv">
<div style="background-image: url(http://placehold.it/100/ff0000/000000); width: 100px; height: 100px;">
<div style="padding: 10px 0 0 10px">sample text</div>
</div>
</div>