SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast erickkz's Avatar
    Join Date
    Dec 2005
    Location
    Earth
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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)">
    My javascript functions

    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;
    }
    any help would be appreciated

  2. #2
    SitePoint Enthusiast erickkz's Avatar
    Join Date
    Dec 2005
    Location
    Earth
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile 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>
    global variables

    PHP Code:
    var gcountobjetos=0;
    var 
    flagsetobjetos=0;

    var 
    xMousePos 0;
    var 
    yMousePos 0
    My constructor to generate more objects

    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>";

    The function that triggers the object motion:

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

    Asign values to my layer and img object

    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

    Funtion that creates the new object

    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

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

    thanks in advance


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •