javascript - add text on image using position - Stack Overflow

admin管理员组

文章数量:1023221

I want to add text dynamically on an image. I tried to use javascript / jQuery to do so. Here is the code :

$(document).ready(function()
{
    var img = $("img#back1");
    var leftpos =  img.position().left;
    var toppos =  img.position().top;
    var div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.top = toppos+"px";
    div.style.left = leftpos+"px";
    div.innerHTML = '<font> back </font>';
    div.style.background = '#CC0000';
    document.body.appendChild(div);
});

After doing this, i am not getting text 'back' over the image. Here, the correct position can't be retrieved to be passed to the top and left of the div tag to specify text over it. Please suggest/ correct me if I've gone wrong somewhere.

Thanks

I want to add text dynamically on an image. I tried to use javascript / jQuery to do so. Here is the code :

$(document).ready(function()
{
    var img = $("img#back1");
    var leftpos =  img.position().left;
    var toppos =  img.position().top;
    var div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.top = toppos+"px";
    div.style.left = leftpos+"px";
    div.innerHTML = '<font> back </font>';
    div.style.background = '#CC0000';
    document.body.appendChild(div);
});

After doing this, i am not getting text 'back' over the image. Here, the correct position can't be retrieved to be passed to the top and left of the div tag to specify text over it. Please suggest/ correct me if I've gone wrong somewhere.

Thanks

• javascript
• jquery
• html
• jquery-ui
• jquery-selectors

Share Improve this question Follow edited Feb 14, 2012 at 11:38 HarsH asked Feb 14, 2012 at 11:20 HarsHHarsH 79433 gold badges1414 silver badges2727 bronze badges 1

• Can you please post your HTML code also here with CSS,Better if you could provide JSFiddle link for that.Might be you're missing Z-index for your div not sure. – Gurvinder Commented Feb 14, 2012 at 11:34

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

A better approach for adding text on image is to put image on background using css.It has a lot of benefits. You can check demo here

demo

From http://api.jquery./position/

The .position() method allows us to retrieve the current position of an element relative to the offset parent. Contrast this with .offset(), which retrieves the current position relative to the document.

As the dynamically created div is attached to the body, using offset() instead of position may help.

You should visit this website:

• http://css-tricks./text-blocks-over-image/

It's a good tutorial for your porpuse. And I would suggest you learn a bit more of jQuery because all of your javascript code doesn't use ans jquery functionality expect the .ready()

The text does not appear or is simply out of place?

If you don't see the text maybe you need to specify the 'z-index' property in the DIV element.

For adding an attribute in javascript you can read: How to add/update an attribute to an HTML element using JavaScript?

I want to add text dynamically on an image. I tried to use javascript / jQuery to do so. Here is the code :

$(document).ready(function()
{
    var img = $("img#back1");
    var leftpos =  img.position().left;
    var toppos =  img.position().top;
    var div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.top = toppos+"px";
    div.style.left = leftpos+"px";
    div.innerHTML = '<font> back </font>';
    div.style.background = '#CC0000';
    document.body.appendChild(div);
});

After doing this, i am not getting text 'back' over the image. Here, the correct position can't be retrieved to be passed to the top and left of the div tag to specify text over it. Please suggest/ correct me if I've gone wrong somewhere.

Thanks

I want to add text dynamically on an image. I tried to use javascript / jQuery to do so. Here is the code :

$(document).ready(function()
{
    var img = $("img#back1");
    var leftpos =  img.position().left;
    var toppos =  img.position().top;
    var div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.top = toppos+"px";
    div.style.left = leftpos+"px";
    div.innerHTML = '<font> back </font>';
    div.style.background = '#CC0000';
    document.body.appendChild(div);
});

After doing this, i am not getting text 'back' over the image. Here, the correct position can't be retrieved to be passed to the top and left of the div tag to specify text over it. Please suggest/ correct me if I've gone wrong somewhere.

Thanks

• javascript
• jquery
• html
• jquery-ui
• jquery-selectors

Share Improve this question Follow edited Feb 14, 2012 at 11:38 HarsH asked Feb 14, 2012 at 11:20 HarsHHarsH 79433 gold badges1414 silver badges2727 bronze badges 1

• Can you please post your HTML code also here with CSS,Better if you could provide JSFiddle link for that.Might be you're missing Z-index for your div not sure. – Gurvinder Commented Feb 14, 2012 at 11:34

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

A better approach for adding text on image is to put image on background using css.It has a lot of benefits. You can check demo here

demo

From http://api.jquery./position/

The .position() method allows us to retrieve the current position of an element relative to the offset parent. Contrast this with .offset(), which retrieves the current position relative to the document.

As the dynamically created div is attached to the body, using offset() instead of position may help.

You should visit this website:

• http://css-tricks./text-blocks-over-image/

It's a good tutorial for your porpuse. And I would suggest you learn a bit more of jQuery because all of your javascript code doesn't use ans jquery functionality expect the .ready()

The text does not appear or is simply out of place?

If you don't see the text maybe you need to specify the 'z-index' property in the DIV element.

For adding an attribute in javascript you can read: How to add/update an attribute to an HTML element using JavaScript?

本文标签： javascriptadd text on image using positionStack Overflow