Question

Is it possible that we can write text on image using html or javascript.

I have done this

Created an em tag and create spans inside it and now we can write any text in spans and adjust the position of em tag such that it appears over image. Set the z-index of em tag to be larger value then image. Then it appears that text is written over image.

But I want to provide option using which a visitor can edit the text. How i can do it ?

Code Sample:-

$("#em1").html("<p><span>Hi I am</span><br>
<span> Trying to </span><br><br>
<span> To write text</span></p>");


#em1{
    display: block;
    /*border: 1px solid black;*/
    position: absolute;
    top: 160px;
    right: 145px;
    z-index : 10;
}

I am using a background (blank-nothing written on it) image

Answer 1

Set the contenteditable attribute on the em element. You probably need to inform users about the edibility, as people don’t normally expect it, and there is nothing in the visual appearance that suggests it.