Q715 How can I load an image over another, when passing the page an x and y co-ordinate?

<FORM ACTION="nextpage.htm">
<INPUT TYPE="TEXT" NAME="X" VALUE="50">
<INPUT TYPE="TEXT" NAME="Y" VALUE="50">
</FORM>

<SPAN ID="big" STYLE="position:absolute; width:300; height:200;">
    <TABLE WIDTH="300" HEIGHT="200" BORDER="0" BGCOLOR="#FFCC00" CELLSPACING="0">
        <TR>
            <TD>
                <IMG SRC="backgroundimage.gif" WIDTH="300" HEIGHT="200">
            </TD>
        </TR>
    </TABLE>
</SPAN>

<SPAN ID="small" STYLE="position:absolute; width:10; height:10;">
    <IMG SRC="small.gif" WIDTH="10" HEIGHT="10">
</SPAN>

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"><!--
if (document.all) {
    document.all('big').style.posLeft = 50;
    document.all('big').style.posTop = 50;
    document.all('small').style.posLeft = 50;
    document.all('small').style.posTop = 50;
}
else if (document.layers) {
    document.layers['big'].left = 50;
    document.layers['big'].top = 50;
    document.layers['small'].left = 50;
    document.layers['small'].top = 50;
}

var x = y = 0; // default values

var passed = location.search ? unescape(location.search.substring(3)) + '&' : '';
if (passed) var x = passed.substring(0,passed.indexOf('&')) - 0;
var passed  = passed.substring(passed.indexOf('&')+3);
if (passed) var y = passed.substring(0,passed.indexOf('&')) - 0;

if (document.all) {
    document.all('small').style.posLeft += x;
    document.all('small').style.posTop += y;
}
else if (document.layers) {
    document.layers['small'].left += x;
    document.layers['small'].top += y;
}
//--></SCRIPT>