Hi, I need big help here. I have two images, image 1 will be the shape of a rectangle, image 2 will be just a circle. On each click on submit button from a user, image 2 will be placed on image 1 on certain position x and y. When another user visits the site and clicks submit button, image 2 will be added again on image 1 on other position x and y, as long as it is still above image 1 (which results in many images 2 on one image 1). Can anybody let me know how to do this? I use insertAdjacentElement for each div id below, but it appears that the circle added in a row, not added to 1 or 2 respectively. Pls see my code below:
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<STYLE type="text/css">
DIV
{
COLOR: blue;
FONT-FAMILY: Verdana;
FONT-SIZE: 5px;
HEIGHT: 20px;
WIDTH: 20px;
POSITION: absolute
}
</style>
<script language=javascript>
</script>
</HEAD>
<body>
<span id="rectangular" style="position:absolute; width:250; height:250;">
<IMG src="rect.gif" WIDTH="250" height="250">
</span>
<span id="circle" style="position:absolute; width:20; height:20; display:none">
<IMG src="circle.gif" WIDTH="10" height="10">
</span>
<div id="nbr">1</div>
<div id="nbr1">2</div>
<script type="text/javascript" language="JavaScript">
<!--
if (document.all){
document.all('rectangular').style.posLeft=50;
document.all('rectangular').style.posTop=50;
document.all('circle').style.posLeft=50;
document.all('circle').style.posTop=250;
document.all('nbr').style.posLeft=60;
document.all('nbr').style.posTop=250;
document.all('nbr1').style.posLeft=80;
document.all('nbr1').style.posTop=230;
document.all('rectangular').style.zIndex=10;
document.all('nbr').style.zIndex=20;
document.all('nbr1').style.zIndex=20;
document.all('circle').style.zIndex=30;
}
var newImg;
function numbers()
{
newImg = document.createElement("<IMG src='circle.gif' WIDTH='10' height='10'>");
if (nbr){
nbr.insertAdjacentElement("afterBegin",newImg);}
else if (nbr1){
nbr1.insertAdjacentElement("afterBegin",newImg);}
}
//-->
</script>
<form>
<table>
<tr><td>
<input type="button" value="Submit" onClick="numbers();">
</td></tr></table>
</form>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<STYLE type="text/css">
DIV
{
COLOR: blue;
FONT-FAMILY: Verdana;
FONT-SIZE: 5px;
HEIGHT: 20px;
WIDTH: 20px;
POSITION: absolute
}
</style>
<script language=javascript>
</script>
</HEAD>
<body>
<span id="rectangular" style="position:absolute; width:250; height:250;">
<IMG src="rect.gif" WIDTH="250" height="250">
</span>
<span id="circle" style="position:absolute; width:20; height:20; display:none">
<IMG src="circle.gif" WIDTH="10" height="10">
</span>
<div id="nbr">1</div>
<div id="nbr1">2</div>
<script type="text/javascript" language="JavaScript">
<!--
if (document.all){
document.all('rectangular').style.posLeft=50;
document.all('rectangular').style.posTop=50;
document.all('circle').style.posLeft=50;
document.all('circle').style.posTop=250;
document.all('nbr').style.posLeft=60;
document.all('nbr').style.posTop=250;
document.all('nbr1').style.posLeft=80;
document.all('nbr1').style.posTop=230;
document.all('rectangular').style.zIndex=10;
document.all('nbr').style.zIndex=20;
document.all('nbr1').style.zIndex=20;
document.all('circle').style.zIndex=30;
}
var newImg;
function numbers()
{
newImg = document.createElement("<IMG src='circle.gif' WIDTH='10' height='10'>");
if (nbr){
nbr.insertAdjacentElement("afterBegin",newImg);}
else if (nbr1){
nbr1.insertAdjacentElement("afterBegin",newImg);}
}
//-->
</script>
<form>
<table>
<tr><td>
<input type="button" value="Submit" onClick="numbers();">
</td></tr></table>
</form>
</BODY>
</HTML>
