1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144
|
<HTML>
<HEAD>
<SCRIPT language="javascript" TYPE="text/javascript">
var ie4 = document.all;
var ns4 = document.layers;
var ns6 = ((!ie4)&&(document.getElementById));
var monCalque;
function init()
{
if(ns6)
{
document.addEventListener("mousedown",start, false); // on affecte une fonction à chaque evenement
document.addEventListener("mousemove",drag, false);
document.addEventListener("mouseup",drop, false);
}
else
{
if(ns4)
{
document.captureEvents(Event.MOUSEDOWN|Event.MOUSEMOVE|
Event.MOUSEUP) // on capture les evenements
}
document.onmousedown=start; // on affecte une fonction à chaque evenement
document.onmousemove=drag;
document.onmouseup=drop;
}
}
function start(e)
{
if (ns4)
{
monCalque=document.layers[e.target.name];
if(monCalque)
{
imsrc = e.target.src; // on recupere le nom de l'image
imname = e.target.name; // le nom de la balise <img>
imwidth = e.target.width; // sa taille initiale en X
imheight = e.target.height; // en Y
monCalque.X=monCalque.left; // sa place à gauche
monCalque.Y=monCalque.top; // sa place en haut
}
return false;
}
else if (ie4)
{
monCalque=event.srcElement.parentElement;
if(monCalque)
{
imsrc = event.srcElement.src;
imname = event.srcElement.name;
imwidth = event.srcElement.width;
imheight = event.srcElement.height;
monCalque.X=monCalque.style.left;
monCalque.X=monCalque.X.substring(0,monCalque.X.length-2); // on supprime px à la fin de la chaine
monCalque.Y=monCalque.style.top;
monCalque.Y=monCalque.Y.substring(0,monCalque.Y.length-2); // on supprime px à la fin de la chaine
}
}
else if (ns6)
{
monCalque=document.getElementById(e.target.name);
if(monCalque)
{
imsrc = e.target.src;
imname = e.target.name;
imwidth = e.target.width;
imheight = e.target.height;
monCalque.X=monCalque.style.left;
monCalque.X=monCalque.X.substring(0,monCalque.X.length-2);
monCalque.Y=monCalque.style.top;
monCalque.Y=monCalque.Y.substring(0,monCalque.Y.length-2);
}
}
}
function drag(e)
{
if(monCalque)
{
contenu = '<img name="'+imname+'" border="1px" src="dummy.gif" width="'+ imwidth; // dummy.gif pour une image vide.
contenu += 'px" height="'+ imheight +'"></img>'; // border=1px pour voir un cadre.
if (ns4)
{
imwidth = eval(e.pageX-monCalque.X); // on recupere la nouvelle taille en X
imheight = eval(e.pageY-monCalque.Y); // en Y
monCalque.document.open();
monCalque.document.write(contenu);
monCalque.document.close();
}
else if ((ie4)&&(monCalque.id))
{
imwidth = eval(event.clientX-monCalque.X); // on recupere la nouvelle taille en X
imheight = eval(event.clientY-monCalque.Y); // en Y
monCalque.innerHTML=contenu;
return false;
}
else if ((ns6)&&(monCalque.id))
{
imwidth = eval(e.clientX-monCalque.X); // on recupere la nouvelle taille en X
imheight = eval(e.clientY-monCalque.Y); // en Y
monCalque.innerHTML=contenu;
return false;
}
}
}
function drop(e)
{
if(monCalque)
{
contenu = '<img name="'+imname+'" src="'+ imsrc +'" width="'+ imwidth;
contenu += 'px" height="'+ imheight +'"></img>';
if (ns4)
{
monCalque.document.open(); // on ouvre puis on ecrit le document
monCalque.document.write(contenu);
monCalque.document.close();
monCalque=null;
}
else if ((monCalque.id)) // pour ie et ns>4
{
monCalque.innerHTML=contenu; // on ouvre puis on ecrit le document
monCalque=null;
return false;
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<DIV id="dgo" z-index="auto" style="position:absolute;left:5;top:10" > <!-- position:absolute necessaire pour ns4 -->
<IMG name="dgo" src="irlande2.jpg" width="100px" height="101px"></DIV>
<DIV id="dgo2" z-index="auto" style="position:absolute;left:300;top:10" >
<IMG name="dgo2" src="irlande.jpg" width="102px" height="103px"></DIV>
<SCRIPT> init();</SCRIPT> <!-- déclenchement ------->
</BODY>
</HTML> |
Partager