asked on

Set an image to background / foreground .

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>

pD_EO

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

obj.zIndex = 100;

:)

pD_EO

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>

vb_elmar

ASKER

@ pD_EO

I tried your sample. It doesn't help.

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

pD_EO

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

vb_elmar

ASKER

I tried your sample in IE.

-The sample did not work.

ASKER CERTIFIED SOLUTION

pD_EO

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

vb_elmar

ASKER

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>