We help IT Professionals succeed at work.

Set an image to background / foreground .

vb_elmar
vb_elmar asked
on
6,449 Views
Last Modified: 2007-12-19
Hello,

the script below is a drag and drop script. It has two images (crocodile and viking).

When dragging the viking image, the crocodile image
(unfortunately) is in the foreground.

How can i change the script, so that
- - the currently moved - -
image is in the foreground?

-It should be like this :

Example 1:
When dragging the viking image, the viking image should be
in the foreground, and the crocodile should be in the background.

Example 2:
When dragging the alligator image, the alligator image should be
in foreground, and the viking should be in the background.


<html>
<head>
<title></title>
</head>
<script>

xm = 0;
ym = 0;
M  = false;
window.onload = function(){
     document.onmousedown= function(e){
          if (!e) e = window.event;
          tg = (e.target) ? e.target : e.srcElement
          if(tg.className =="d" && e.button==1){
               M = tg;
               with(M.style){
                    xZ = pixelLeft-xm;
                    yZ = pixelTop-ym;          
               }
               return false;    
          }
               
     }
     document.onmouseup= function(){
          if(M){M = false;}
     }
     document.onmousemove=function(e){          
          if (!e) e = window.event;
          tg = (e.target) ? e.target : e.srcElement
               xm = (e.x || e.clientX);
               ym = (e.y || e.clientY);
               if(M){
                    M.style.pixelLeft=xm+xZ;
                    M.style.pixelTop=ym+yZ;          
                    return false
               }              
     }    
}

</script>


<body oncontextmenu="return false">

<p>
<img src="http://files.opera-info.de/bilder/forum/user/viking.gif" class="d" title="image 1" style="position:absolute;top:150px">
<img src="http://www.walterzorn.de/images/dragdrop/ddalligator.jpg" class="d" title="image 2" style="position:absolute">
</p>
</body>
</html>
Comment
Watch Question

Commented:
For onmousedown and onmousemove, give the element a zIndex of 100...

obj.zIndex = 100;

:)

Commented:
So...

<html>
<head>
<title></title>
</head>
<script>

xm = 0;
ym = 0;
M  = false;
window.onload = function(){
     document.onmousedown= function(e){
          if (!e) e = window.event;
          tg = (e.target) ? e.target : e.srcElement
          if(tg.className =="d" && e.button==1){
               M = tg;
               with(M.style){
                    xZ = pixelLeft-xm;
                    yZ = pixelTop-ym;
                    zIndex = 100;          
               }
               return false;    
          }
               
     }
     document.onmouseup= function(){
          if(M){M = false;}
     }
     document.onmousemove=function(e){          
          if (!e) e = window.event;
          tg = (e.target) ? e.target : e.srcElement
               xm = (e.x || e.clientX);
               ym = (e.y || e.clientY);
               if(M){
                    M.style.pixelLeft=xm+xZ;
                    M.style.pixelTop=ym+yZ;
                    M.style.zIndex = 100;  
                    return false
               }              
     }    
}

</script>


<body oncontextmenu="return false">

<p>
<img src="http://files.opera-info.de/bilder/forum/user/viking.gif" class="d" title="image 1" style="position:absolute;top:150px">
<img src="http://www.walterzorn.de/images/dragdrop/ddalligator.jpg" class="d" title="image 2" style="position:absolute">
</p>
</body>
</html>

Author

Commented:
@ pD_EO

I tried your sample. It doesn't help.

-Unfortunately, the crocodile image
remains in the foreground at all times.

Commented:
Your code needs to be tweaked to work in Firefox, but playing around with the zIndex of the element you are dragging, it can be done.

pixelTop, pixelLeft are IE only.

Also, you are checking if the left mouse button is being used, in Firefox, it will report it as 0, but in IE it reports it as 1.

Maybe have a look at an API...

http://www.youngpup.net/2001/domdrag

Author

Commented:
I tried your sample in IE.

-The sample did not work.
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
I modified your suggestion.

-Now, the following sample works :



<html>
<head>
<title></title>
</head>
<script>

xm = 0;
ym = 0;
count = 0;
M  = false;
window.onload = function(){
     document.onmousedown= function(e){
          if (!e) e = window.event;
          tg = (e.target) ? e.target : e.srcElement
          if(tg.className =="d" && e.button==1){
               M = tg;
               count=count+1;
               with(M.style){
                    xZ = pixelLeft-xm;
                    yZ = pixelTop-ym;
                    zIndex = count;          
               }
               return false;    
          }
               
     }
     document.onmouseup= function(){
          if(M){M = false;}
     }
     document.onmousemove=function(e){          
          if (!e) e = window.event;
          tg = (e.target) ? e.target : e.srcElement
               xm = (e.x || e.clientX);
               ym = (e.y || e.clientY);
               if(M){
                    M.style.pixelLeft=xm+xZ;
                    M.style.pixelTop=ym+yZ;
                    return false
               }              
     }    
}

</script>


<body oncontextmenu="return false">

<p>
<img src="http://files.opera-info.de/bilder/forum/user/viking.gif" class="d" title="image 1" style="position:absolute;top:150px">
<img src="http://www.walterzorn.de/images/dragdrop/ddalligator.jpg" class="d" title="image 2" style="position:absolute"> </p>
</body>
</html>
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.