Place an image on an existing webpage using JavaScript - document.createElement("img")

dshrenik
dshrenik used Ask the Experts™
on

I am trying to place an image on an existing webpage (Firefox) through JavaScript using the following code"
(I am using content.document since the code is being run from a FireFox sidebar plugin)

//Image Element                               
iElement = content.document.createElement("img");
iElement.src = "source";
iElement.style.position = "absolute";
iElement.style.left = 50;
iElement.style.top = 50;
iElement.style.zIndex = 100;                  
content.document.body.appendChild(iElement);

The problem is that the image is always getting placed at the bottom left corner of the page, regardless of the location mentioned.

Moreover, when I try to display the value of its x-coordinate using the code below, I get a blank message.

var x_dummy = iElement.style.left;
alert(x_dummy);

Please tell me how I should correct this.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
According to this page http://www.w3schools.com/jsref/dom_obj_style.asp , most of the style object properties can be set but not read back.

I found this demo code on Mozilla and modified it to show a positioned image.  It's a slightly different method than you are using but maybe you can use some of it.
<html>
<head>
<title>||Working with elements||</title>
</head>

<script type="text/javascript">
var my_div = null;
var newDiv = null;
var newDiv2 = null;

function addElement()
{
  // create a new div element
  // and give it some content
  newDiv = document.createElement("div");
  newDiv.innerHTML = "<h1>Hi there and greetings!</h1><br>";
  newDiv2 = document.createElement("div");
	newDiv2.style.position = "absolute";
	newDiv2.style.left = 350;
	newDiv2.style.top = 50;
	newDiv2.style.zIndex = 100;                  
	newDiv2.innerHTML = "<img alt='jquery-cal (9K)' src='jquery-cal.jpg' height='170' width='201' />";


  // add the newly created element and it's content into the DOM
  my_div = document.getElementById("org_div1");
  document.body.insertBefore(newDiv, my_div);
  document.body.insertBefore(newDiv2, newDiv);
}

</script>

<body onload="addElement()">
<div id='org_div1'> The text above has been created dynamically.</div>
</body>
</html>

Open in new window

Author

Commented:
It does not seem to work.
The funny part is that the code that i posted works when I try to place the image on an HTML webpage. But, on pages like this http://www.jotform.com/form/1994821566 , it places the image only at the bottom left corner.
Moreover, when I use HttpWebRequest to save the contents of the webpage in the link mentioned above into an HTML page, it works fine!
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
My code works perfectly on my machine with Firefox and IIS.  I used the 'style' part of your code to position the image.

Maybe you should show us the actual code/page you're trying to use so we can see what's going on.
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
I am sorry. I made a wrong observation above.
My target webpage is http://www.jotform.com/form/1994821566

The problem seems to be with the first line of the source code of the webpage i mentioned:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

When I remove the above line from the source code, and save the code as a new webpage, and run the JavaScript on that, the image is placed at the right position.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Then that is the solution.  Right?  In my code example I use the 'loose' DTD which I always do.

Author

Commented:
I am sorry. I did not completely get what you are trying to say.
My question is, how do I make the code work for webpages that  start with this line:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Author

Commented:
I don't think the problem is loose DTD or stric DTD.
The JavaScript code fails to place the image at the right location when that line below is present:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

However, when I remove that line, it works.
Commented:
The coordinates must be assigned as:
iElement.style.left = "50px";

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial