Gestionnaire de fenetre (bouger, redimentieonner,tourner, rendre transparent)

Soyez le premier à donner votre avis sur cette source.

Vue 14 842 fois - Téléchargée 1 221 fois

Description

Voila un groupe de script qui m'ont pris un peu de temps, et en fait j'ai pas encore trouvé quoi en faire, donc voila si vous trouvez dites le moi...
ATTENTION C'EST POUR IE 5.5 mini et j'ai mis la page exemple en ASP c'est plus simple mais les scripts sont en Javascript...

Donc la, on gere des fenetres (2 dans l'exemple) dans le navigateur on les bouge, on les redimentionne on les fait tourner et on les rend transparentes (ulisez les boutons en haut a droite pour les deux dernieres fonctions)...

En gros c'est une base apres vous en faites ce que vous voulez...

Conclusion :


Si vous avez des questions j'y répondrais ...

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
25
Date d'inscription
mardi 28 octobre 2003
Statut
Membre
Dernière intervention
4 août 2005

Et ben merci les gens pour tous ces commentaires sympatiques...et pour ces adaptations que j'aurais de toute façon pas eu le temps de faire...
j'ai quelques autres truc comme ca en stock mais je n'ai plus le temps a y consacrer pour les rendre exploitable...et puis c'est souvent lié à de l'ASP (comme l'organigramme dynamique que j'ai posé sur aspfr.com )...

Si vous voulez en savoir + envoyez moi un message j'y répondrais (enfin si j'en recois pas des tonnes...)

Good coding !
Messages postés
1
Date d'inscription
lundi 17 février 2003
Statut
Membre
Dernière intervention
10 juin 2004

Bonjour,
Quand j'ai vu ce script, je l'ai trouvé excellent, mais je suis dit qu'il manquait quelques trucs. Notamment le fait qu'il soit en asp ou php

Je l'ai donc modifié, n'a besoin de rien d'autre que votre browser.
Recuperer les sources du script de chacal, puis coller ca dans un autre fichier. il manquera juste une image nommé deplacer.gif.

Voila, je remercie chacal pour son script, j'avais bosser sur un truc dans le genre, mais avec autant de fonctionalité.

Bon Allez a plus et encore merci

------------------------------------------------------------------------------


<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 ObjetRes;
var DecX = 0;
var DecY = 0;
var PosX = 0;
var PosY = 0;
var Type = "";
var Angle = 0;
var actu;
var prec;
var demarre = "non";

/*var actu=document.all('Texte1');
var prec=document.all('Texte1');*/
var indexcpt=100;

function Bouge(Obj)
{

actu=Obj;
aff(Obj);

Obj = document.getElementById("dep");
actu.style.display='none';

TransParent(actu.id,100,1,100);
actu.style.zIndex=indexcpt++;
Obj.style.zIndex=indexcpt++;
if (prec != null && prec != actu)
{
TransParent(prec.id,5,1,70);
}
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 bouger(Obj)
{

// S'il n'y a pas de deplacement en cours, on attrape la piece
if (demarre == "non")
{
Bouge(Obj);
}
// S'il y a un deplacmeent en cours, on pose la piece
if (demarre == "oui")
{
Objet = document.getElementById("dep");
Release();
}
}

function OnDown ()
{
var nom = "fr_" + Objet.id;
if (document.getElementById(nom))
document.getElementById(nom).style.display='none';

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 OnDownRes ()
{
var nom = "fr_" + ObjetRes.id;
if (document.getElementById(nom))
document.getElementById(nom).style.display='none';

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 = ReleaseRes;
}

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()
{
demarre = "non";
var nom = "fr_" + actu.id;
actu.style.display='';
if (document.getElementById(nom))
document.getElementById(nom).style.display='';


if (Type == "MOVE" && Objet)
{
actu.style.top = Objet.style.top;
actu.style.left = Objet.style.left;
/* ObjetDep.style.width=parseInt(Objet.style.width)+15;
ObjetDep.style.height=parseInt(Objet.style.height)+42;*/
Objet.style.visibility='hidden';
}

Objet = 0;
prec=actu;

}
function ReleaseRes()
{

var nom = "fr_" + ObjetRes.id;
if (document.getElementById(nom))
document.getElementById(nom).style.display='';

if (Type == "RESIZE")
{
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);
ResizeItFR(Wd,He);
}

ObjetRes = 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;
if ( x%5 0 || y%5 0 )
{
NewX = x - DecX;
NewY = y - DecY;
moveIt(NewX,NewY);
}
// window.status = Objet.id+"(X="+NewX+",Y="+NewY+")";
} else {
return -1;
}
}
function moveIt(x,y){
if (Objet) {
demarre = "oui";

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);
}
ObjetRes = Obj;
if (ObjetRes) {
RepereIt();
document.onmousedown = OnDownRes;
document.onmouseup = ReleaseRes;
}
}
function RepereIt() {
Type = "RESIZE";

if (ObjetRes) {
PosX = parseInt(ObjetRes.style.left);
PosY = parseInt(ObjetRes.style.top);
}
}
function defTaille () {
if (ObjetRes) {
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) {
ObjetRes.style.width=Wd;
ObjetRes.style.height=He;
}
}
function ResizeItFR(Wd,He)
{
var nom = "fr_" + ObjetRes.id;
if (Wd > 29 && He > 39) {
if (document.getElementById(nom))
{
document.getElementById(nom).width = Wd;
document.getElementById(nom).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;
}
}

function aff(obj)
{
var ObjetDep = document.getElementById("dep");
// var ObjetRef1 = document.getElementById("Texte2");
var nom = "fr_"+obj.id;
var ObjetRef3 = document.getElementById(nom);
var ObjetRef1 = obj;

ObjetDep.style.zIndex=indexcpt++;

/*alert(ObjetRef3.height);
alert(ObjetRef3.width);
*/

ObjetDep.style.top = ObjetRef1.style.top;
ObjetDep.style.left = ObjetRef1.style.left;
if (ObjetRef3){
ObjetDep.style.width=parseInt(ObjetRef3.width)+15;
ObjetDep.style.height=parseInt(ObjetRef3.height)+42;}
ObjetDep.style.visibility='visible';
}

function creaff(lien,nom)
{
var chainediv ="";
if (!document.getElementById(nom))
{
newsrc = lien;
chainediv = chainediv + "
";
chainediv = chainediv + " \";
// chainediv = chainediv + \" ----
\";
chainediv = chainediv + \" ----
\";
chainediv = chainediv + \" , \";
chainediv = chainediv + \" "+nom+", \";
chainediv = chainediv + \" , \";
chainediv = chainediv + \" \";
chainediv = chainediv + \" ----
\";
chainediv = chainediv + \" , \";
chainediv = chainediv + \" ";
chainediv = chainediv + "<table>----, \";
chainediv = chainediv + \"\";
chainediv = chainediv + \"\";
chainediv = chainediv + "</td>
";
chainediv = chainediv + " </TD>";
chainediv = chainediv + " <TD bgcolor=#ECE8D8 BACKGROUND="Pict/Cadre/Right.gif"></TD>";
chainediv = chainediv + " </TR>";
chainediv = chainediv + " <TR>";
chainediv = chainediv + " <TD WIDTH="3" height=3></TD>";
chainediv = chainediv + " <TD bgcolor=#ECE8D8 BACKGROUND="Pict/Cadre/Bottom.gif"></TD>";
chainediv = chainediv + " <TD WIDTH="3" height=3></TD>";
chainediv = chainediv + " </TR>";
chainediv = chainediv + " </TABLE>";
chainediv = chainediv + "

";
chainediv = chainediv + "
";
chainediv = chainediv + " \";
chainediv = chainediv + \"
";
chainediv = chainediv + "
";
chainediv = chainediv + "
";
chainediv = chainediv + " \";
chainediv = chainediv + \" ----

";
chainediv = chainediv + "
";
chainediv = chainediv + "
";

document.body.innerHTML = document.body.innerHTML + " " + chainediv;
}
else
document.getElementById(nom).style.display='';

if (actu== null && prec== null)
{
actu=document.getElementById(nom);
prec=document.getElementById(nom);
}

}
function menu()
{
var Target=document.all('ChoixAngTexte1');
if (Target.style.display=='none')
Target.style.display='';
else
Target.style.display='none';
}
</script>
<link rel="STYLESHEET" type="text/css" href="feuille.css">

</HEAD>




Déplacement en cours...






[javascript:menu() menu]



popup
,

----

popup176.htm
,

----

popup177.htm
,

----

test.html










</HTML>
Messages postés
49
Date d'inscription
dimanche 21 septembre 2003
Statut
Membre
Dernière intervention
17 décembre 2008

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;
?>

" STYLE="z-index:10;position: absolute; top:<? echo $PosT; ?>; Left: <? echo $PosL; ?>; width: <? echo $La ?>; height: <? echo $Lo ?>;filter:Shadow(Color=#909090, Direction=120) ;" >
');Bouge(Target);\" onMouseUp=\"Release();\">
,
<? echo $Nom ?>,
,

----

,
<? if ($Typ=="txt") { echo $Cont; }else {
?>

" WIDTH="100%" HEIGHT="100%">
<? } ?>,
,

----

,
,



" 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">


" 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;">



" 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">


" STYLE="position:absolute;Top:15;Right:10;width:45;display:'none'">
');rotate('<? echo $Nom ?>',0);Target.style.display='none';">0 °
,
----

');rotate('<? echo $Nom ?>',10);Target.style.display='none';">+ 10 °
,
----

');rotate('<? echo $Nom ?>',30);Target.style.display='none';">+ 30 °
,
----

');rotate('<? echo $Nom ?>',60);Target.style.display='none';">+ 60 °
,
----

');rotate('<? echo $Nom ?>',120);Target.style.display='none';">+ 120 °
,
----

');rotate('<? echo $Nom ?>',180);Target.style.display='none';">+ 180 °





" 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">


" STYLE="position:absolute;Top:15;Right:20;width:45;display:'none'">
');TransParent('<? echo $Nom ?>',100,0,100);Target.style.display='none';">100%
,
----

');TransParent('<? echo $Nom ?>',90,0,100);Target.style.display='none';">90%
,
----

');TransParent('<? echo $Nom ?>',80,0,100);Target.style.display='none';">80%
,
----

');TransParent('<? echo $Nom ?>',70,0,100);Target.style.display='none';">70%
,
----

');TransParent('<? echo $Nom ?>',60,0,100);Target.style.display='none';">60%
,
----

');TransParent('<? echo $Nom ?>',50,0,100);Target.style.display='none';">50%
,
----

');TransParent('<? echo $Nom ?>',40,0,100);Target.style.display='none';">40%










<? $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>


<? $Tst = $Test;
if ($Tst == "True"){ ?>



<?
$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");
}
?>


<? } ?>




<FORM METHOD="POST" NAME=Form1 ACTION="Test.php" >


Image :Largeur :
Longueur :



Image :





Texte :


Largeur :
Longueur :


Texte :


<TEXTAREA ROWS=6 NAME=Texto COLS=81></TEXTAREA><SCRIPT language="JavaScript1.2">//editor_generate('Texto');</SCRIPT>





</FORM>





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

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

Voila, bonne continuation.
Messages postés
25
Date d'inscription
mardi 28 octobre 2003
Statut
Membre
Dernière intervention
4 août 2005

Ben non sorry j'ai fait ca pendant le développement d'un intranet et le serveur dont je me sers pour le dev est sur mon portable...mais le code est facilement transformable en PHP ou full javascript, c'est juste pour récupérer les données du formulaire (taiiles des fenetres , image et texte )

++
Messages postés
629
Date d'inscription
mercredi 3 juillet 2002
Statut
Membre
Dernière intervention
9 octobre 2006

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

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.