SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
-
Nov 1, 2006, 13:19 #1
- Join Date
- Dec 2005
- Location
- Earth
- Posts
- 88
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
generate movable copies of images
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
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)">
Code: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; }
-
Nov 3, 2006, 16:58 #2
- Join Date
- Dec 2005
- Location
- Earth
- Posts
- 88
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Clone movable image, second unsuccesfull try
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
HTML Code:<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>
PHP Code:var gcountobjetos=0;
var flagsetobjetos=0;
var xMousePos = 0;
var yMousePos = 0;
PHP Code: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>";
}
PHP Code:function setobj(objetuse){
if(document.all){
flagsetobjetos=objetuse;
document.onmousemove=captureMousePosition;
}
}
PHP Code: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
}
PHP Code: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
}
thanks in advance
Bookmarks