generate movable copies of images

[erickkz]

Hi everyone!

What I'm trying to do is when I clic on a image, I make a copy and I can take this copy everywhere the mouse goes and put it in a specific area. But when I choose other image the last one disapear.This happens because I'm using the same object to display it, an <img> object inside of a <div> to make it able to move. I just changing the src atribute of <img>,so, my question is how can I make copies of the same image . Here is some of my code:

html code

<div id="floatimg" style="position:absolute; left:0px; top:0px;">
<img id="test"> 
</div>


<img src="ball1.gif" id="ball1" width="50" height="50" onClick="setobj(this.id)">
<img src="ball2.gif" id="ball2" width="50" height="50" onClick="setobj(this.id)">
<img src="ball3.gif" id="ball3" width="50" height="50" onClick="setobj(this.id)">
<img src="ball4.gif" id="ball4" width="50" height="50" onClick="setobj(this.id)">

My javascript functions

function setobj(objeto){
        if(document.all){
	     flagsetobjetos=objeto;
              document.onmousemove=captureMousePosition;
	}
}

function captureMousePosition(q){
var myobjeto=document.getElementById('floatimg');
var testid=document.getElementById('test');
	
xMousePos = event.clientX-50;
yMousePos = event.clientY-50;
	
myobjeto.style.left=xMousePos;
myobjeto.style.top=yMousePos;
testid.src=sourceobj.src;
}

any help would be appreciated

[erickkz]

Hi!

I tried some but i still didn't get the behaviour I need, this time I used a constructor to obtain more objects:

the html objects

<img src="ball1.gif" id="ball1" width="50" height="50" onClick="setobj(this.id)">
<img src="ball2.gif" id="ball2" width="50" height="50" onClick="setobj(this.id)">

<div id="floatimg" style="position:absolute; display:none; left:0px; top:0px;"><img id="test"></div>

<td width="642" onClick="freevent()">
			<div id="principalarea" style="position:relative; overflow:yes; left:0px; top:0px; width:666px; height:500px; border:1px #FFFFFF;"></div>			
		</td>

global variables

var gcountobjetos=0;
var flagsetobjetos=0;

var xMousePos = 0;
var yMousePos = 0; 

My constructor to generate more objects

MyNewLayer=function(idlayer,idimg,srcimg,xpos,ypos){
var something;
var mylayer;

this.xpos;
this.ypos;
this.idlayer=idlayer;
this.srcimg=srcimg;
this.idimg=idimg;
this.something="<img id='"+this.idimg+"' src='"+this.srcimg+"'>";
this.mylayer="<div id='"+this.idlayer+"' style='position:relative; left:"+this.xpos;+"px; top:"+this.ypos;+"px;'>"+this.something+"<div>";
} 

The function that triggers the object motion:

function setobj(objetuse){
    if(document.all){
        flagsetobjetos=objetuse;
        document.onmousemove=captureMousePosition;
    }
} 

Asign values to my layer and img object

function captureMousePosition(q){
var myobjeto=document.getElementById('floatimg');
var sourceobj=document.getElementById(flagsetobjetos);
var testid=document.getElementById('test');
var display=document.getElementById('principalarea');

    xMousePos = event.clientX-50;//get mouse x position
    yMousePos = event.clientY-50;//get mouse y position
    
    myobjeto.style.left=xMousePos;//put my object in xMousePos position
    myobjeto.style.top=yMousePos;//put my object in yMousePos position
    
    testid.src=sourceobj.src;//asign src value to my img object
    myobjeto.style.display = "block";//show layer
} 

Funtion that creates the new object

function freevent(){

    domObj1 = new MyNewLayer('floatimg'+gcountobjetos,'test'+gcountobjetos,sourceobj.src,xMousePos,yMousePos);
    display.innerHTML=domObj1.mylayer;//display image in my main layer
    gcountobjetos++;
    document.onmousemove=null;//stop moving
} 

But It didn't work either, someone could put me on the right direction

thanks in advance