GESTIONNAIRE DE FENETRE (BOUGER, REDIMENTIEONNER,TOURNER, RENDRE TRANSPARENT)

Commentaire de ThunderPsycho le 03/03/2004 10:10:53

C vrai que question utilité... moi non plus je n'ai pas d'idée ;o)
Mais je suis sur que ca servira à qqun...

A part ça, la source reste vraiment pas mal est en fait toute simple. C sympa. Just deux choses :
- Ca serait pas mal d'ajouter une fonction pour effectuer une rotation avec la souris, en l'activant lorsque la souris est présente près de l'angle de l'image
- Et les manipulations sont lourdes, et ca en chie pas mal ( j'imagine meme pas pour une rotation à la souris ;o) ). si tu veux avoir un bon gain en performances, oublies les fonctions et les variables asp et fait tout  en javascript, je m'explique :
Le truc qui  fait le plus cracher ton serveur c'est le fait d'appeler de l'asp sans arrêt ( à chaque fois que tu effectues <%%> ). Tu obliges, lors de la compilation, ton serveur à basculer entre le compilateur asp et l'interpréteur html à chaque appel, ce qui constitue une manip lourde et qui fait perdre bcp de temps lors de l'envoi de ta page au client.

Voila, 9/10

Commentaire de iubito le 08/03/2004 06:56:28

tu l'a fais en asp, j'ai pas de serveur asp, tu peux balancer une url pour le tester ?

Commentaire de babid le 11/03/2004 10:37:41

Salut,

Tout d'abord, sympa ta source le_chacal, manque peut etre des commentaires pour les debutants, sinon je te mets 9/10 car ca les merite.

Ibuto, j'ai repris son code et je l'ai mis en php, le voila :

//-------------------------------------------------------------------------//
<?
function NewDiv ($La,$Lo,$Typ,$Cont,$Nom){
$PosT = 200;
$PosL = 200;
?>
<DIV  ID="<? echo $Nom ?>" STYLE="z-index:10;position: absolute; top:<? echo $PosT; ?>; Left: <? echo $PosL; ?>; width: <? echo $La ?>; height: <? echo $Lo ?>;filter:Shadow(Color=#909090, Direction=120) ;" >
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" STYLE="border-collapse: collapse" BORDERCOLOR="#111111" WIDTH="100%" HEIGHT=100% ID="AutoNumber1">
   <TR onMouseOver="this.style.cursor='move';"  onMouseDown="Target=document.all('<? echo $Nom ?>');Bouge(Target);" onMouseUp="Release();">
     <TD WIDTH="3" HEIGHT=3><IMG BORDER="0" SRC="Pict/Cadre/TL.gif" WIDTH="5" HEIGHT="21"></TD>
     <TD BGCOLOR=#ECE8D8 BACKGROUND="Pict/Cadre/Top.gif"><FONT SIZE=1 COLOR=#FFFFFF><? echo $Nom ?></FONT></TD>
     <TD WIDTH="3" HEIGHT=3><IMG BORDER="0" SRC="Pict/Cadre/TR.gif" WIDTH="4" HEIGHT="21"></TD>
   </TR>
   <TR>
     <TD BGCOLOR=#ECE8D8 BACKGROUND="Pict/Cadre/Left.gif"></TD>
     <TD BGCOLOR="#FFFFFF" VALIGN=top>
<? if ($Typ=="txt") { echo $Cont; }else {
?>
  
<IMG SRC="<? echo $Cont ?>" WIDTH="100%" HEIGHT="100%">   
<? } ?>    
     </TD>
     <TD BGCOLOR=#ECE8D8 BACKGROUND="Pict/Cadre/Right.gif"></TD>
   </TR>
   <TR>
     <TD WIDTH="3" HEIGHT=3><IMG BORDER="0" SRC="Pict/Cadre/BL.gif" WIDTH="5" HEIGHT="16"></TD>
     <TD BGCOLOR=#ECE8D8 BACKGROUND="Pict/Cadre/Bottom.gif"></TD>
     <TD WIDTH="3" HEIGHT=3><IMG BORDER="0" SRC="Pict/Cadre/BR.gif" WIDTH="4" HEIGHT="16"></TD>
   </TR>
</TABLE>
<DIV ID="CloZ<?  echo $Nom ?>" onMouseOver="this.style.cursor='hand'" onClick="Target=document.all('<?  echo $Nom ?>');Target.style.display='none'; " STYLE="z-index: 11;position: absolute;top: 5;right: 7"><IMG ALT="Fermer..." SRC="pict/cadre/cloz.gif"></DIV>
<DIV ID="ResiZ<?  echo $Nom ?>"  onMouseDown="Target=document.all('<? echo $Nom ?>');ChangeTaille(Target);" onMouseUp="Release();" STYLE="z-index: 11;position: absolute;cursor:se-resize;Bottom: 4;right: 3; width:10;height : 10;"><TABLE ALT="Taille..." BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=10 HEIGHT=10><TR><TD BACKGROUND="pict/cadre/resiz.gif" ></TD></TR></TABLE></DIV>  
<DIV ID="Rotat<?  echo $Nom ?>" onMouseOver="this.style.cursor='hand'" onClick="Target=document.all('ChoixAng<?  echo $Nom ?>');if (Target.style.display=='none'){Target.style.display='';}else{Target.style.display='none';} " STYLE="z-index: 11;position: absolute;top: 5;right: 20"><IMG  ALT="Rotation..." SRC="pict/cadre/rotate.gif"></DIV>
<DIV ID="ChoixAng<?  echo $Nom ?>" STYLE="position:absolute;Top:15;Right:10;width:45;display:'none'">
<TABLE WIDTH=100% BGCOLOR=#ECE9D8 STYLE="border-width:1;border-style: solid;" BORDERCOLOR=#505050>
<TR>
<TD onMouseOver="this.style.cursor='hand';this.bgColor='#BCBBE6';" onMouseOut="this.bgColor='#ECE9D8';" onClick="Target=document.all('ChoixAng<?  echo $Nom ?>');rotate('<?  echo $Nom ?>',0);Target.style.display='none';"><FONT SIZE=2>0 °</FONT></TD>
</TR><TR>
<TD onMouseOver="this.style.cursor='hand';this.bgColor='#BCBBE6';" onMouseOut="this.bgColor='#ECE9D8';" onClick="Target=document.all('ChoixAng<?  echo $Nom ?>');rotate('<?  echo $Nom ?>',10);Target.style.display='none';"><FONT SIZE=2>+ 10 °</FONT></TD>
</TR><TR>
<TD onMouseOver="this.style.cursor='hand';this.bgColor='#BCBBE6';" onMouseOut="this.bgColor='#ECE9D8';" onClick="Target=document.all('ChoixAng<?  echo $Nom ?>');rotate('<?  echo $Nom ?>',30);Target.style.display='none';"><FONT SIZE=2>+ 30 °</FONT></TD>
</TR><TR>
<TD onMouseOver="this.style.cursor='hand';this.bgColor='#BCBBE6';" onMouseOut="this.bgColor='#ECE9D8';" onClick="Target=document.all('ChoixAng<?  echo $Nom ?>');rotate('<?  echo $Nom ?>',60);Target.style.display='none';"><FONT SIZE=2>+ 60 °</FONT></TD>
</TR><TR>
<TD onMouseOver="this.style.cursor='hand';this.bgColor='#BCBBE6';" onMouseOut="this.bgColor='#ECE9D8';" onClick="Target=document.all('ChoixAng<?  echo $Nom ?>');rotate('<?  echo $Nom ?>',120);Target.style.display='none';"><FONT SIZE=2>+ 120 °</FONT></TD>
</TR><TR>
<TD onMouseOver="this.style.cursor='hand';this.bgColor='#BCBBE6';" onMouseOut="this.bgColor='#ECE9D8';" onClick="Target=document.all('ChoixAng<?  echo $Nom ?>');rotate('<?  echo $Nom ?>',180);Target.style.display='none';"><FONT SIZE=2>+ 180 °</FONT></TD>
</TR>
</TABLE>
</DIV>
<DIV ID="Degrad<?  echo $Nom ?>" onMouseOver="this.style.cursor='hand'" onClick="Target=document.all('ChoixDeg<?  echo $Nom ?>');if (Target.style.display=='none'){Target.style.display='';}else{Target.style.display='none';} " STYLE="z-index: 11;position: absolute;top: 5;right: 32"><IMG  ALT="Transparence..." SRC="pict/cadre/degrad.gif"></DIV>
<DIV ID="ChoixDeg<?  echo $Nom ?>" STYLE="position:absolute;Top:15;Right:20;width:45;display:'none'">
<TABLE WIDTH=100% BGCOLOR=#ECE9D8 STYLE="border-width:1;border-style: solid;" BORDERCOLOR=#505050>
<TR>
<TD onMouseOver="this.style.cursor='hand';this.bgColor='#BCBBE6';" onMouseOut="this.bgColor='#ECE9D8';" onClick="Target=document.all('ChoixDeg<?  echo $Nom ?>');TransParent('<?  echo $Nom ?>',100,0,100);Target.style.display='none';"><FONT SIZE=2>100%</FONT></TD>
</TR><TR>
<TD onMouseOver="this.style.cursor='hand';this.bgColor='#BCBBE6';" onMouseOut="this.bgColor='#ECE9D8';" onClick="Target=document.all('ChoixDeg<?  echo $Nom ?>');TransParent('<?  echo $Nom ?>',90,0,100);Target.style.display='none';"><FONT SIZE=2>90%</FONT></TD>
</TR><TR>
<TD onMouseOver="this.style.cursor='hand';this.bgColor='#BCBBE6';" onMouseOut="this.bgColor='#ECE9D8';" onClick="Target=document.all('ChoixDeg<?  echo $Nom ?>');TransParent('<?  echo $Nom ?>',80,0,100);Target.style.display='none';"><FONT SIZE=2>80%</FONT></TD>
</TR><TR>
<TD onMouseOver="this.style.cursor='hand';this.bgColor='#BCBBE6';" onMouseOut="this.bgColor='#ECE9D8';" onClick="Target=document.all('ChoixDeg<?  echo $Nom ?>');TransParent('<?  echo $Nom ?>',70,0,100);Target.style.display='none';"><FONT SIZE=2>70%</FONT></TD>
</TR><TR>
<TD onMouseOver="this.style.cursor='hand';this.bgColor='#BCBBE6';" onMouseOut="this.bgColor='#ECE9D8';" onClick="Target=document.all('ChoixDeg<?  echo $Nom ?>');TransParent('<?  echo $Nom ?>',60,0,100);Target.style.display='none';"><FONT SIZE=2>60%</FONT></TD>
</TR><TR>
<TD onMouseOver="this.style.cursor='hand';this.bgColor='#BCBBE6';" onMouseOut="this.bgColor='#ECE9D8';" onClick="Target=document.all('ChoixDeg<?  echo $Nom ?>');TransParent('<?  echo $Nom ?>',50,0,100);Target.style.display='none';"><FONT SIZE=2>50%</FONT></TD>
</TR><TR>
<TD onMouseOver="this.style.cursor='hand';this.bgColor='#BCBBE6';" onMouseOut="this.bgColor='#ECE9D8';" onClick="Target=document.all('ChoixDeg<?  echo $Nom ?>');TransParent('<?  echo $Nom ?>',40,0,100);Target.style.display='none';"><FONT SIZE=2>40%</FONT></TD>
</TR>
</TABLE>
</DIV>

</DIV>



<? $PosT = $PosT + 20;
$PosL = $PosL + 20;
}
?>
<HTML>
<HEAD>
<META NAME="GENERATOR" CONTENT="Microsoft FrontPage 5.0">
<META NAME="ProgId" CONTENT="FrontPage.Editor.Document">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>Nouvelle page 1</TITLE>

<SCRIPT language="Javascript1.2">

var Objet;
var DecX = 0;
var DecY = 0;
var PosX = 0;
var PosY = 0;
var Type = "";
var Angle = 0;

function Bouge(Obj) {
if(navigator.appName.substring(0,3) == "Net"){
document.captureEvents(Event.MOUSEDOWN|Event.MOUSEMOVE|Event.MOUSEUP);
}
Objet = Obj;
if (Objet) {
Decal();
   document.onmousedown = OnDown;
   document.onmouseup = Release;
   }
}
function OnDown () {
if(navigator.appName.substring(0,3) == "Net"){
document.captureEvents(Event.MOUSEDOWN|Event.MOUSEMOVE|Event.MOUSEUP);
}
if (Type == "MOVE") {
document.onmousemove = posit;
} else if (Type == "RESIZE") {
document.onmousemove = defTaille;
}
   document.onmouseup = Release;
}
function Decal() {
Type = "MOVE";
if (Objet) {
OldX = parseInt(Objet.style.left);
OldY = parseInt(Objet.style.top);
x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x + document.body.scrollTop;
y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y + document.body.scrollLeft;
DecX = x - OldX;
DecY = y - OldY;
} else {
return -1;
}
}
function Release() {
Objet = 0;
}
function posit(){
if (Objet) {
x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x + document.body.scrollTop;
y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y + document.body.scrollLeft;
NewX = x - DecX;
NewY = y - DecY;
window.status = Objet.id+"(X="+NewX+",Y="+NewY+")";
moveIt(NewX,NewY);
} else {
return -1;
}
}
function moveIt(x,y){
if (Objet) {
Objet.style.top =  y;
Objet.style.left = x;
} else {
return -1;
}
}
function ChangeTaille(Obj) {
if(navigator.appName.substring(0,3) == "Net"){
document.captureEvents(Event.MOUSEDOWN|Event.MOUSEMOVE|Event.MOUSEUP);
}
Objet = Obj;
if (Objet) {
RepereIt();
   document.onmousedown = OnDown;
   document.onmouseup = Release;
   }
}
function RepereIt() {
Type = "RESIZE";
if (Objet) {
PosX = parseInt(Objet.style.left);
PosY = parseInt(Objet.style.top);
}
}
function defTaille () {
if (Objet) {
x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x + document.body.scrollTop;
y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y + document.body.scrollLeft;
Wd = (PosX - x)*(-1);
He = (PosY - y)*(-1);
ResizeIt(Wd,He);
} else {
return -1;
}
}
function ResizeIt(Wd,He) {
if (Wd > 30 && He > 40) {
Objet.style.width=Wd;
Objet.style.height=He;
}
}
function degToRad (angle) {
angle = (angle/ 180) * 3.142;
return angle;
}
function rotate(name, angle){
//convert angle into radians
     var rad = degToRad(angle);

     //calculate cos and sin of the angle
     costheta = Math.cos(rad);
     sintheta = Math.sin(rad);

     //create object reference
     var Target = document.getElementById(name);
     if(Target) {
         //apply the filter
         Target.style.filter = "progid:DXImageTransform.Microsoft.Matrix();";

         //set up the properties
         Target.filters.item("DXImageTransform.Microsoft.Matrix").SizingMethod = "auto expand";
         Target.filters.item("DXImageTransform.Microsoft.Matrix").FilterType = "bilinear";

        //apply the rotation matrix transformation
         Target.filters.item("DXImageTransform.Microsoft.Matrix").M11 = costheta;
         Target.filters.item("DXImageTransform.Microsoft.Matrix").M12 = -sintheta;
         Target.filters.item("DXImageTransform.Microsoft.Matrix").M21 = sintheta;
         Target.filters.item("DXImageTransform.Microsoft.Matrix").M22 = costheta;
    }    
}
function TransParent(name,Begin,Type,End) {
var Target = document.getElementById(name);
if (Target) {
Target.style.filter="Alpha";
Target.filters.item("Alpha").opacity = Begin;
Target.filters.item("Alpha").FinishOpacity = End;
Target.filters.item("Alpha").Style = Type;
}
}
function MagicEffect(Name,Angle,Mir,Inv,Xray,Gray,Opac) {
var Target = document.getElementById(Name);
if (Target) {
Target.style.filter = "progid:DXImageTransform.Microsoft.BasicImage();";

Target.filters.item("DXImageTransform.Microsoft.BasicImage").Rotation = Angle;
Target.filters.item("DXImageTransform.Microsoft.BasicImage").Mirror = Mir;
Target.filters.item("DXImageTransform.Microsoft.BasicImage").Invert = Inv;
Target.filters.item("DXImageTransform.Microsoft.BasicImage").XRay = Xray;
Target.filters.item("DXImageTransform.Microsoft.BasicImage").Grayscale = Gray;
Target.filters.item("DXImageTransform.Microsoft.BasicImage").Opacity = Opac;
}
}
</SCRIPT>

</HEAD>
<BODY>

<? $Tst = $Test;
if ($Tst == "True"){  ?>
<DIV ID=LesCalques  STYLE="z-index: 10; width: 100% ; height: 100% ;filter:Shadow(Color=#909090, Direction=120) ;">

<?
$La = $Larg;
$Lo = $Long;
$Img = $Img;
$La1 = $Larg1;
$Lo1 = $Long1;
$Txt = $Texto;
if ($La!="" && $Lo!="" && $Img!=""){
NewDiv ($La,$Lo,"Img",$Img,"Image 1");
}
if ($La1!="" && $Lo1!="" && $Txt!=""){
NewDiv ($La1,$Lo1,"txt",$Txt,"Texte 1");
}
?>
</DIV>
<? } ?>


<DIV STYLE="z-index: 2;position: absolute;top: 0;Left:0;">
<FORM METHOD="POST" NAME=Form1 ACTION="Test.php" >
<INPUT TYPE=hidden NAME=Img VALUE="">
<INPUT TYPE=hidden NAME=Test VALUE="True">
    Image :<P>Largeur : <INPUT TYPE="text" NAME="Larg" SIZE="6">      
  Longueur : <INPUT TYPE="text" NAME="Long" SIZE="6">          
  <INPUT TYPE="button" VALUE="Créer" NAME="B1" onClick="Img.value=CImg.value;Form1.submit();"></P>
    <P>Image :</P>
  <P><INPUT TYPE="file" NAME="CImg" SIZE="67"></P>
  <P>Texte :</P>
  <P>Largeur : <INPUT TYPE="text" NAME="Larg1" SIZE="6">      
  Longueur : <INPUT TYPE="text" NAME="Long1" SIZE="6">       </P>
  <P>Texte :</P>
  <P><TEXTAREA ROWS=6 NAME=Texto COLS=81></TEXTAREA><SCRIPT language="JavaScript1.2">//editor_generate('Texto');</SCRIPT></P>
  <P> </P>
</FORM>
</DIV>
</BODY>


</HTML>
//-------------------------------------------------------------------------//

Je n'ai fait que migrer le code de ASP a PHP et 2 petites retouches pour corriger les erreurs.

Voila, bonne continuation.