asked on

Creating image tags on, and relative to, another image tag in Javascript

I have this code that displays an image on top of an image. In the example below, the main image called "canvas" is 330px by 427px. I am superimposing another image which is 60 by 60.

If the image is the only thing in the body, the smaller image is nicely centered on the big image but if I create a table which is offset, then the smaller image shows up where the image was originally, not where it actually ends up...

For instance, try the code below and you get a red dot in the middle of the picture but change the code by using this as the body:

<TABLE><TR><TD colspan=2> SAMPLE </TD></TR>
<TR><TD>THIS IS TEST</TD><TD>
<script type="text/javascript">showcanvas();</SCRIPT>
<script type="text/javascript">adddot();</SCRIPT>
</TD></TR></TABLE>

and you'll see that the dot is not centered any longer.... Does anyone know how to "fix" this?

<HTML>

<SCRIPT TYPE="text/javascript">

var imageheight=427;
var imagewidth=330;

function showcanvas()
{
document.write ('<IMG id=canvas SRC="http://www.leconcombre.com/concpost/us/postcard4/alfred_e_neuman.jpg" width='+imagewidth+' height='+imageheight+' />');
}

function adddot()
{
var elem = document.getElementById('canvas');

var pic_left = elem.offsetLeft;
var pic_top = elem.offsetTop;
var pic_width = imagewidth;
var pic_height = imageheight;

var dimg = 'http://www.cap.nsw.edu.au/web_building/redspher.gif';

var dwidth = 60;
var dheight = 60;

var relativex = pic_width / 2.0;
var relativey = pic_height / 2.0;

var xpos = pic_left + relativex - (dwidth / 2.0);
var ypos = pic_top + relativey - (dheight / 2.0);

document.write ('<IMG style=" position:absolute; top:'+ypos+'px; left:'+xpos+'px; height:'+dheight+'px; width:'+dwidth+'px; background-color: transparent;" src="'+dimg+'" />');

}
</SCRIPT>

<BODY>

<script type="text/javascript">showcanvas();</SCRIPT>
<script type="text/javascript">adddot();</SCRIPT>

</BODY>
</HTML>

ASKER CERTIFIED SOLUTION

Mark Steggles

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Mark Steggles

P.S Its not recommended to use tables to layout pages but you will learn that as you go

bganoush

ASKER

Yes I know... I'm just using this as an example.. the same thing happens no matter how I "place" the back image... For instance, I also tried just doing this:

<BODY>
Hello: <script type="text/javascript">showcanvas();</SCRIPT><script type="text/javascript">adddot();</SCRIPT>
</BODY>

And the same thing happens, the "Hello:" part pushed the canvas right and a bit down and the dot wasn't centered...

I also tried something simple like adding a header before the image:

<BODY>
<H1>Look at me!</H1>
<SCRIPT....

and the same thing happened, the "dot" was higher than it should have been...

In any case, your code worked... thanks.