-1

I need to place Text on an arrow (image). I have the image but i dont know how many times i will need it & which Text has to be placed on it (but its limited on e.g. 12 characters). In the end i want to have a row of arrows that represent a workflow.

I cant use HTML5 Tags - everything should be done with JavaScript.

My idea was to place text relative to the position of the image (using jQuery). My first two trial (see //Test1 and //Test2) failed bcs i always get the same position of each image:

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

the HTML:

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

Test1 or Test2 give me both "8 23" for imggreen and imggrey

Where is my mistake?

Do you have a different idea for a dynamic generate of the images & text placing?

Edit: I know that the code (like img-Creation) looks not really cool, it were just some trials

sibe94
  • 17
  • 2

1 Answers1

0

You can do this entirely in html. I posted a mockup 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>

If you have to do some of this with javascript, you can do it almost in the exact same way. Load the image, get the width/height and set it on a div with text overlayed.

Community
  • 1
  • 1
  • Wow what a simple solution! I will come back when i was successfull and mark your answer als solution :) – sibe94 Feb 16 '15 at 10:14