FENETRE MULTIPLE fenetres modales, fenetre multiples, fenetrage, windows, Source N°46615

Information sur la source

Catégorie :Fenêtre & Pop-up Classé sous : fenetres modales, fenetre multiples, fenetrage, windows Niveau : Débutant Date de création : 09/05/2008 Date de mise à jour : 23/06/2008 21:11:01 Vu / téléchargé: 2 635 / 196

Auteur : kazma

Ecrire un message privé

Note :

5,00 / 10

1
2
3
4
5
6
7
8
9
10

Commentaire sur cette source (4)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

des fenêtres dans le navigateur que l'on déplace a la sourie dans lesquelles tout contenu peut être inséré (image,video,text...etc)compatible IE FF Opera Safari

Source

<html>
<title>fenetres</title>
<head>
<SCRIPT>
var deb=0 // important
var tour=2 // important
var fen
// detection du mouvement de sourie pour FF et IE
function tarto(s) {
if(navigator.appName.substring(0,3)=="Net"){
setX = s.clientX+document.body.scrollLeft;
setY = s.clientY+document.body.scrollTop;
}
if(navigator.appName.substring(0,3)!="Net"){
setX=event.x+document.body.scrollLeft;
setY=event.y+document.body.scrollTop;
}
}
document.onmousemove=tarto
///////////////////////////////////////////////////////////////////////////
// fonction de gestion du deplacement des fenetres par raport au curseur//
/////////////////////////////////////////////////////////////////////////
function sp(cen){
if(tour==2){ // logique
return false
}
if(tour==1){
px=setX
py=setY
fen=cen
tour=0
}
//calcule de la position de la fenetre par raport au curseur
didi=document.getElementById(fen).offsetLeft
dide=document.getElementById(fen).offsetTop
document.getElementById(fen).style.left=didi+setX-px
document.getElementById(fen).style.top=dide+setY-py
px=setX
py=setY
setTimeout("sp(fen)",10)
}
/////////////////////////////////////////////////////////////////////
// fonction de gestion de position des fenetre au niveau du zindex//
///////////////////////////////////////////////////////////////////
function plans(pp){
var nb_de_fenetre=6 //nombre de fenetres dans la page
if(deb==0){
// si on rajouter des fenetre il faudra agrandir le tableau th,ti...etc
ttb=["tr","ta","tb","tc","td","te","tf","tg"]
deb=1
}
ttb[(nb_de_fenetre+1)]=pp
for(mul=parseInt(document.getElementById(pp).style.zIndex)+1;mul<nb_de_fenetre+2;mul++){
ttb[mul-1]=ttb[mul]
document.getElementById(ttb[mul]).style.zIndex=(mul-1)
}
ttb[nb_de_fenetre+1]="tg"
}
</SCRIPT>
</head>
<body>
<table BORDER=2 bgcolor=#B9B3A7green" text="red" width=300 height=250 ID="ta" STYLE="position:absolute;top:10px;left:10px;z-Index:0"onmousedown=plans('ta')>
<tr><td height=20 background="im.jpg" onmousedown=tour=1;sp('ta'); onmouseup=tour=2;>
<img src='fin.jpg' align=right></td></tr>
<tr><td bgcolor=green>
Il était une fois, voici bien longtemps, un pauvre meunier qui avait trois fils.
Les deux ainés étaient très paresseux, mais le plus jeune travaillait dur.
à sa mort, le meunier ne laissa à ses enfants que son moulin, son âne et son chat.
</td></tr></table>
<table BORDER=2 bgcolor=#B9B3A7 text="red" width=300 height=250 ID="tb"; STYLE="position:absolute;top:300px;left:10px;z-Index:1"onmousedown=plans('tb')>
<tr><td height=20 background="im.jpg" onmousedown=tour=1;sp("tb"); onmouseup=tour=2;><img src='fin.jpg' align=right></td></tr><tr><td bgcolor=brown>
Le plus vieux reçut le moulin le second, l'âne
et le troisième n'hérita que d'un chat.
Ses frères l'auraient probablement noyé.
Les aînés s'empressèrent de vendre le moulin et l'âne.
Et, comme ils ne travaillaient pas, ils eurent vite dépensé tout leur argent.
</td></tr></table>
<table BORDER=2 bgcolor=#B9B3A7 text="red" width=300 height=250 ID="tc" STYLE="position:absolute;top:10px;left:350px;z-Index:1"onmousedown=plans('tc')>
<tr><td height=20 background="im.jpg" onmousedown=tour=1;sp("tc"); onmouseup=tour=2;><img src='fin.jpg' align=right></td></tr><tr><td bgcolor=yellow>
Le plus jeune se désolait.
Que ferais-je avec ce matou ?
Je pourrais me confectionner des gants avec sa fourrure
mais celà ne m'empêchera pas de mourir de faim."
</td></tr></table>
<table BORDER=2 bgcolor=#B9B3A7 text="red" width=300 height=250 ID="td"; STYLE="position:absolute;top:300px;left:350px;z-Index:1"onmousedown=plans('td')>
<tr><td height=20 background="im.jpg" onmousedown=tour=1;sp("td"); onmouseup=tour=2;><img src='fin.jpg' align=right></td></tr><tr><td bgcolor=blue>
Le chat qui avait d'autres projets,......prit la parole:
Vous avez tort de vous plaindre, mon bon maître!
lui dit le chat, à sa grande surprise.
En échange de ce que vous avez fait pour moi, je vous apporterai le bonheur !
</td></tr></table>
<table BORDER=2 bgcolor=#B9B3A7 text="red" width=300 height=250 ID="te" STYLE="position:absolute;top:10px;left:700px;z-Index:1"onmousedown=plans('te')>
<tr><td height=20 background="im.jpg" onmousedown=tour=1;sp("te"); onmouseup=tour=2;><img src='fin.jpg' align=right></td></tr><tr><td bgcolor=orange>
Donnez-moi seulement un sac et une paire de bottes,
et je ferai votre fortune! insista le chat.
J'ai juste assez d'argent pour t'acheter ce que tu demandes, dit le garçon.
Lorque le chat eut chaussé les bottes, son maître éclata de rire:
Te voilà un vrai chat botté !
</td></tr></table>
<table BORDER=2 bgcolor=#B9B3A7 text="red" width=300 height=250 ID="tf"; STYLE="position:absolute;top:280px;left:680px;z-Index:1"onmousedown=plans('tf')>
<tr><td height=20 background="im.jpg"onmousedown=tour=1;sp("tf"); onmouseup=tour=2;><img src='fin.jpg' align=right></td></tr><tr><td bgcolor=red>
<h1>et ca marche tres tres bien </h1</td></tr></table>
</body>
</html>

<html>
<title>fenetres</title>
<head>
<SCRIPT>
var deb=0     // important
var tour=2    // important
var fen

// detection du mouvement de sourie pour FF et IE

function tarto(s) {
if(navigator.appName.substring(0,3)=="Net"){
setX = s.clientX+document.body.scrollLeft;
setY = s.clientY+document.body.scrollTop;
}
if(navigator.appName.substring(0,3)!="Net"){
setX=event.x+document.body.scrollLeft;
setY=event.y+document.body.scrollTop;
}
}
document.onmousemove=tarto

///////////////////////////////////////////////////////////////////////////
// fonction de gestion du deplacement des fenetres par raport au curseur//
/////////////////////////////////////////////////////////////////////////

function sp(cen){

if(tour==2){    // logique
return false
}
if(tour==1){
px=setX
py=setY
fen=cen
tour=0
}

//calcule de la	 position de la fenetre par raport au curseur

didi=document.getElementById(fen).offsetLeft
dide=document.getElementById(fen).offsetTop
document.getElementById(fen).style.left=didi+setX-px
document.getElementById(fen).style.top=dide+setY-py
px=setX
py=setY
setTimeout("sp(fen)",10)
}

/////////////////////////////////////////////////////////////////////
// fonction de gestion de position des fenetre au niveau du zindex//
///////////////////////////////////////////////////////////////////

function plans(pp){

var nb_de_fenetre=6  //nombre de fenetres dans la page

if(deb==0){

// si on rajouter des fenetre il faudra agrandir le tableau th,ti...etc

ttb=["tr","ta","tb","tc","td","te","tf","tg"]
deb=1
}
ttb[(nb_de_fenetre+1)]=pp
for(mul=parseInt(document.getElementById(pp).style.zIndex)+1;mul<nb_de_fenetre+2;mul++){
ttb[mul-1]=ttb[mul]
document.getElementById(ttb[mul]).style.zIndex=(mul-1)
}
ttb[nb_de_fenetre+1]="tg"
}
</SCRIPT>
</head>



<body>

<!--pas besoin d'un div vue qu'il sagit d'un tableau,onmousedown declenche la fonction plan pour la getion du z-index pour l'ensemle de la fenetre -->

<table BORDER=2 bgcolor=#B9B3A7green" text="red" width=300 height=250  ID="ta" STYLE="position:absolute;top:10px;left:10px;z-Index:0"onmousedown=plans('ta')>

<!--lors d'un onmousedown la varible tour est mise a 1 et la variable fen de la fontion sp prend l'id du table qui a pour effet de declancher la fonction sp(), onmouseup arrete la fonction -->

<tr><td height=20 background="im.jpg" onmousedown=tour=1;sp('ta'); onmouseup=tour=2;>

<!--afin d'eviter un petit probleme de selection d'image de firefox on ajoutera une petite image sur la droite,on pourait lui inserer une fonction de visibilter afin de faire disparaitre la fenetre-->

<img src='fin.jpg' align=right></td></tr>
<tr><td bgcolor=green>

Il était une fois, voici bien longtemps, un pauvre meunier qui avait trois fils.
Les deux ainés étaient très paresseux, mais le plus jeune travaillait dur.
à sa mort, le meunier ne laissa à ses enfants que son moulin, son âne et son chat.
</td></tr></table>

<table BORDER=2 bgcolor=#B9B3A7 text="red" width=300 height=250  ID="tb"; STYLE="position:absolute;top:300px;left:10px;z-Index:1"onmousedown=plans('tb')>
<tr><td height=20 background="im.jpg" onmousedown=tour=1;sp("tb"); onmouseup=tour=2;><img src='fin.jpg' align=right></td></tr><tr><td bgcolor=brown>
Le plus vieux reçut le moulin le second, l'âne
et le troisième n'hérita que d'un chat.
Ses frères l'auraient probablement noyé.
Les aînés s'empressèrent de vendre le moulin et l'âne.
Et, comme ils ne travaillaient pas, ils eurent vite dépensé tout leur argent.
</td></tr></table>

<table BORDER=2 bgcolor=#B9B3A7 text="red" width=300 height=250  ID="tc" STYLE="position:absolute;top:10px;left:350px;z-Index:1"onmousedown=plans('tc')>
<tr><td height=20 background="im.jpg" onmousedown=tour=1;sp("tc"); onmouseup=tour=2;><img src='fin.jpg' align=right></td></tr><tr><td bgcolor=yellow>
Le plus jeune se désolait.
Que ferais-je avec ce matou ?
Je pourrais me confectionner des gants avec sa fourrure
mais celà ne m'empêchera pas de mourir de faim."
</td></tr></table>


<table BORDER=2 bgcolor=#B9B3A7 text="red" width=300 height=250  ID="td"; STYLE="position:absolute;top:300px;left:350px;z-Index:1"onmousedown=plans('td')>
<tr><td height=20 background="im.jpg" onmousedown=tour=1;sp("td"); onmouseup=tour=2;><img src='fin.jpg' align=right></td></tr><tr><td bgcolor=blue>
Le chat qui avait d'autres projets,......prit la parole:
Vous avez tort de vous plaindre, mon bon maître!
lui dit le chat, à sa grande surprise.
En échange de ce que vous avez fait pour moi, je vous apporterai le bonheur !

</td></tr></table>

<table BORDER=2 bgcolor=#B9B3A7 text="red" width=300 height=250  ID="te" STYLE="position:absolute;top:10px;left:700px;z-Index:1"onmousedown=plans('te')>
<tr><td height=20 background="im.jpg" onmousedown=tour=1;sp("te"); onmouseup=tour=2;><img src='fin.jpg' align=right></td></tr><tr><td bgcolor=orange>
Donnez-moi seulement un sac et une paire de bottes,
et je ferai votre fortune! insista le chat.
J'ai juste assez d'argent pour t'acheter ce que tu demandes, dit le garçon.
Lorque le chat eut chaussé les bottes, son maître éclata de rire:
Te voilà un vrai chat botté !

</td></tr></table>

<table BORDER=2 bgcolor=#B9B3A7 text="red" width=300 height=250  ID="tf"; STYLE="position:absolute;top:280px;left:680px;z-Index:1"onmousedown=plans('tf')>
<tr><td height=20 background="im.jpg"onmousedown=tour=1;sp("tf"); onmouseup=tour=2;><img src='fin.jpg' align=right></td></tr><tr><td bgcolor=red>
<h1>et ca marche tres tres bien </h1</td></tr></table>

</body>
</html>

Conclusion

et çà marche très bien

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

fenetres
- fenetres nouvelle version.html 5 614 octets
- fenetres premiere version.html 5 637 octets
- fin.jpg 720 octets
- im.jpg 742 octets

Télécharger le zip

Historique

10 mai 2008 23:07:43 :: code en trop
11 mai 2008 20:22:44 :: optimisation du code
13 mai 2008 22:28:54 :: ajout de commentaire pour la compréhensions et la mise en œuvre du script
13 mai 2008 22:32:45 :: ajout de commentaires pour une bonne compréhension et mise en œuvre du script
16 mai 2008 15:03:23 :: nouvelle optimisation
02 juin 2008 16:07:31 :: modification pour une adaptation plus simple (ajout d'une variable)
23 juin 2008 21:11:01 :: j'ai creer une seul fonction de detection du mouvement de sourie pour IE et FF les deux fontion etait separe ; le script ne tourne plus continuellement en arriere plans la fonction sp()fonctionnement seulement quand on deplace la fenetre resultat:fontionnement tres bien sur Opera ou a l'origine sa ramai et tous les autre navigateur IE FF et Safari.

Sources du même auteur

Toutes les sources de kazma

Sources de la même categorie

Toutes les sources de la catégorie Fenêtre & Pop-up

Sources en rapport avec celle ci

Commentaires

Commentaire de abdelaziz_info le 11/05/2008 01:26:38

Bonjours :

Même avec : <SCRIPT> ça marche pour (type="text/javascript")
Et ça peut bouger sur toute la page comme ça aussi: <table onmousemove=sp()

C'est bien.
Commentaire de Pedrosa le 12/05/2008 12:12:03

Très bien.

Mais, mais... Comment puis faire pourque ça monte pas l'une sur l'autre. C-à-d, dès que l'une monte sur une autre, cette dernière cherche une place où elle doit rester.
Merci bien.
Commentaire de Ricky_MacElroy le 26/05/2008 21:07:51

C'est laid!!!!!!!!
Commentaire de kazma le 27/05/2008 19:21:04

je fait des scripts je suis pas graphiste

Ajouter un commentaire

Discussions en rapport avec ce code source

SOS!! balise windows.open par Olivierp001

problème avec Windows.Open par asm123

ms dos et windows 3.11 par ico19

ecriture dans un fichier + username windows par math85

desactivé la touche avec le logo windows par minicooper

Barre menu style Windows par cstan

Windows Update AIDEZ moi ????????????? par WbMr

Windows Media par samki

Lire une musique ds Windows Media ActiveX grace a un lien par link78180

Javascript Windows.open par s.defaye