Faire déplacer un calque sur une page web

<script language="javascript" type="text/javascript">
<!--
function MM_timelineStop(tmLnName) { //v1.2
//Copyright 1997 Macromedia, Inc. All rights reserved.
if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
if (tmLnName == null) //stop all
for (var i=0; i<document.MM_Time.length; i++) document.MM_Time[i].ID = null;
else document.MM_Time[tmLnName].ID = null; //stop one
}

function MM_dragLayer(objNS,objIE,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v2.0
//Copyright 1998 Macromedia, Inc. All rights reserved.
var i,j,aLayer,retVal,curDrag=null,NS=(navigator.appName=='Netscape'), curLeft, curTop;
if (!document.all && !document.layers) return false;
retVal = true; if(!NS && event) event.returnValue = true;
if (MM_dragLayer.arguments.length > 1) {
curDrag = eval((NS)?objNS:objIE); if (!curDrag) return false;
if (!document.allLayers) {
document.allLayers = new Array();
with (document) {
if (NS) {
for (i=0; i<layers.length; i++) allLayers[i]=layers[i];
for (i=0; i<allLayers.length; i++) {
if (allLayers[i].document && allLayers[i].document.layers)
for (j=0; j<allLayers[i].document.layers.length; j++)
allLayers[allLayers.length] = allLayers[i].document.layers[j];
} } else {
for (i=0; i<all.length; i++)
if (all[i].style != null && all[i].style.position)
allLayers[allLayers.length] = all[i];
} } }
curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
curDrag.MM_oldZ = (NS)?curDrag.zIndex:curDrag.style.zIndex;
curLeft= (NS)?curDrag.left:curDrag.style.pixelLeft; curDrag.MM_startL = curLeft;
curTop = (NS)?curDrag.top:curDrag.style.pixelTop; curDrag.MM_startT = curTop;
curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop -cU;
curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop +cD;
curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
} else {
var theEvent = ((NS)?objNS.type:event.type);
if (theEvent == 'mousedown') {
var aLayer, maxDragZ=null;
var mouseX = (NS)?objNS.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objNS.pageY : event.clientY + document.body.scrollTop;
document.MM_maxZ = 0;
for (i=0; i<document.allLayers.length; i++) {
aLayer = document.allLayers[i];
var aLayerZ = (NS)?aLayer.zIndex:aLayer.style.zIndex;
if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
var isVisible = (((NS)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
var parentL=0; var parentT=0;
if (!NS) {
parentLayer = aLayer.parentElement;
while (parentLayer != null && parentLayer.style.position) {
parentL += parentLayer.offsetLeft;
parentT += parentLayer.offsetTop;
parentLayer = parentLayer.parentElement;
} }
var tmpX=mouseX-(((NS)?pageX:style.pixelLeft+parentL)+MM_hLeft);
var tmpY=mouseY-(((NS)?pageY:style.pixelTop +parentT)+MM_hTop);
var tmpW = MM_hWidth; if (tmpW <= 0) tmpW += ((NS)?clip.width :offsetWidth);
var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS)?clip.height:offsetHeight);
if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) &&
(maxDragZ == null || maxDragZ <= aLayerZ)) {
curDrag = aLayer; maxDragZ = aLayerZ;
} } }
if (curDrag) {
document.onmousemove = MM_dragLayer;
if (NS) document.captureEvents(Event.MOUSEMOVE);
curLeft = (NS)?curDrag.left:curDrag.style.pixelLeft;
curTop = (NS)?curDrag.top:curDrag.style.pixelTop;
MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
document.MM_curDrag = curDrag; curDrag.MM_SNAPPED=false;
if(curDrag.MM_toFront) {
eval('curDrag.'+((NS)?'':'style.')+'zIndex=document.MM_maxZ+1');
if (!curDrag.MM_dropBack) document.MM_maxZ++;
}
retVal = false; if(!NS) event.returnValue = false;
} } else if (theEvent == 'mousemove') {
if (document.MM_curDrag) with (document.MM_curDrag) {
var mouseX = (NS)?objNS.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objNS.pageY : event.clientY + document.body.scrollTop;
newLeft = mouseX-MM_oldX; newTop = mouseY-MM_oldY;
if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
if (MM_bT!=null) newTop = Math.max(newTop ,MM_bT);
if (MM_bB!=null) newTop = Math.min(newTop ,MM_bB);
MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
if (NS) {left = newLeft; top = newTop;}
else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
if (MM_dragJS) eval(MM_dragJS);
retVal = false; if(!NS) event.returnValue = false;
} } else if (theEvent == 'mouseup') {
document.onmousemove = null;
if (NS) document.releaseEvents(Event.MOUSEMOVE);
if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
if (document.MM_curDrag) with (document.MM_curDrag) {
if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
(Math.pow(MM_targL-((NS)?left:style.pixelLeft),2)+
Math.pow(MM_targT-((NS)?top:style.pixelTop),2))<=MM_tol) {
if (NS) {left = MM_targL; top = MM_targT;}
else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL;
MM_UPDOWN = MM_startT-MM_targT;
}
if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
if(MM_dropBack) {if (NS) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
retVal = false; if(!NS) event.returnValue = false;
}
document.MM_curDrag = null;
}
if (NS) document.routeEvent(objNS);
}
return retVal;
}

function MM_timelinePlay(tmLnName, myID) { //v1.2
//Copyright 1997 Macromedia, Inc. All rights reserved.
var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstTime=false;
if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
tmLn = document.MM_Time[tmLnName];
if (myID == null) { myID = ++tmLn.ID; firstTime=true;}//if new call, incr ID
if (myID == tmLn.ID) { //if Im newest
setTimeout('MM_timelinePlay("'+tmLnName+'",'+myID+')',tmLn.delay);
fNew = ++tmLn.curFrame;
for (i=0; i<tmLn.length; i++) {
sprite = tmLn[i];
if (sprite.charAt(0) == 's') {
if (sprite.obj) {
numKeyFr = sprite.keyFrames.length; firstKeyFr = sprite.keyFrames[0];
if (fNew >= firstKeyFr && fNew <= sprite.keyFrames[numKeyFr-1]) {//in range
keyFrm=1;
for (j=0; j<sprite.values.length; j++) {
props = sprite.values[j];
if (numKeyFr != props.length) {
if (props.prop2 == null) sprite.obj[props.prop] = props[fNew-firstKeyFr];
else sprite.obj[props.prop2][props.prop] = props[fNew-firstKeyFr];
} else {
while (keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]) keyFrm++;
if (firstTime || fNew==sprite.keyFrames[keyFrm-1]) {
if (props.prop2 == null) sprite.obj[props.prop] = props[keyFrm-1];
else sprite.obj[props.prop2][props.prop] = props[keyFrm-1];
} } } } }
} else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
if (fNew > tmLn.lastFrame) tmLn.ID = 0;
} }
}

function MM_initTimelines() {
//MM_initTimelines() Copyright 1997 Macromedia, Inc. All rights reserved.
var ns = navigator.appName == "Netscape";
document.MM_Time = new Array(1);
document.MM_Time[0] = new Array(1);
document.MM_Time["Timeline1"] = document.MM_Time[0];
document.MM_Time[0].MM_Name = "Timeline1";
document.MM_Time[0].fps = 15;
document.MM_Time[0][0] = new String("sprite");
document.MM_Time[0][0].slot = 1;
if (ns)
document.MM_Time[0][0].obj = document["Layer2"];
else
document.MM_Time[0][0].obj = document.all ? document.all["Layer2"] : null;
document.MM_Time[0][0].keyFrames = new Array(1, 21);
document.MM_Time[0][0].values = new Array(2);
document.MM_Time[0][0].values[0] = new Array(208,223,238,253,269,284,299,314,329,344,359,375,390,405,420,435,450,466,481,496,511);
document.MM_Time[0][0].values[0].prop = "left";
document.MM_Time[0][0].values[1] = new Array(212,210,207,205,202,200,197,195,192,190,187,185,182,180,177,175,172,170,167,165,162);
document.MM_Time[0][0].values[1].prop = "top";
if (!ns) {
document.MM_Time[0][0].values[0].prop2 = "style";
document.MM_Time[0][0].values[1].prop2 = "style";
}
document.MM_Time[0].lastFrame = 21;
for (i=0; i<document.MM_Time.length; i++) {
document.MM_Time[i].ID = null;
document.MM_Time[i].curFrame = 0;
document.MM_Time[i].delay = 1000/document.MM_Time[i].fps;
}
}
//-->
</script> 

<body link="#6633FF" text="#000000" topmargin=0 leftmargin=0 onLoad="MM_timelinePlay('Timeline1')">
<div id="Layer1" style="position:absolute; width:41px; height:404px; z-index:204; left: 794px; top: 161px">
<img src="Zlos1.gif" width="25" height="18"><img src="Zlos2.gif" width="25" height="24"><img src="Zlos1.gif" width="25" height="18"><img src="Zlos2.gif" width="25" height="24"><img src="Zlos1.gif" width="25" height="18"><img src="Zlos2.gif" width="25" height="25"><font face="Arial, Helvetica, sans-serif" color="#3333FF" size="2"><img src="Zlos1.gif" width="25" height="18"><img src="Zlos2.gif" width="25" height="25"><img src="Zlos1.gif" width="25" height="18"><img src="Zlos2.gif" width="25" height="26"></font></div>
<div id="Layer2" style="position:absolute; width:206px; height:313px; z-index:205; left: 208px; top: 212px" onLoad="MM_timelinePlay('Timeline1')" onDblClick="MM_timelinePlay('Timeline1');MM_dragLayer('document.layers[\'Layer2\']','document.all[\'Layer2\']',0,0,0,0,true,false,-1,-1,-1,-1,208,212,50,'',false,'')"><img src="MLGvoilierB.gif" width="157" height="318" onLoad="MM_timelinePlay('Timeline1')"></div>
<div id="dek" class="dek"></div>