Question

我需要在箭头（图像）上放置文本。我有图像，但我不知道我需要多少次＆amp;哪个文本必须放在它上面（但它限制在例如12个字符）。最后，我希望有一排代表工作流程的箭头。

我不能使用HTML5标签 - 一切都应该用JavaScript完成。

我的想法是相对于图像的位置放置文本（使用jQuery）。我的前两个试验（参见// Test1和// Test2）失败bcs我总是得到每个图像的相同位置：

    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);
    };

HTML：

<body>
    <div id="imageDiv">
    </div>
    <p id="test1"></p>
    <p id="test2"></p>
</body>

Test1或Test2给了我“8 23”的imggreen和imggrey

我的错误在哪里？

对于动态生成图像，你有不同的想法吗？文字放置？

编辑：我知道代码（比如img-Creation）看起来不太酷，只是一些试验

Answer 1

你可以在html中完全执行此操作。我发布了一个模型here。

<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>

如果你必须用javascript做一些，你几乎可以用完全相同的方式做到这一点。加载图片get the width/height并将其设置在带有文字重叠的div上。

仅使用JavaScript将文本放在img上/获取当前创建的img的位置/放置tex

1 个答案: