Fenetre multiple

Soyez le premier à donner votre avis sur cette source.

Vue 10 667 fois - Téléchargée 1 099 fois

Description

des fenêtres dans lesquelles tout contenu peut être inséré (image,video,text...etc)mais aussi des image et texte dans le navigateur que l'on déplace a la sourie totalement compatible IE FF Opera Safari et chrome une deuxieme source a ete ajouter elle gere le redimensionnement des image,je l'ai mis a par car quelle complique le script

Source / Exemple :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <html xmlns="http://www.w3.org/1999/xhtml">
<title>fenetres</title>
<head>
<style>
.Style1 {
position:absolute;
width:300px;
height:250px;
border-style:groove;
border-width:2px;
background-color:#B9B3A7;
}
.Style2 {
height:15px;
background-image:url('im.jpg')
}
</style>
<SCRIPT>
var deb=0     // important
var tour=2    // important
var fen
function disableselect(e){
return false
}
function disableselecte(e){
return true
}

// detection du mouvement de sourie pour FF et IE

function tarto(s) {
if(navigator.appName.substring(0,3)=="Net"){
setX = s.clientX+document.documentElement.scrollLeft;
setY = s.clientY+document.documentElement.scrollTop;
}
if(navigator.vendor!=null && (navigator.vendor.substring(0,3)=="Goo") || navigator.vendor!=null && navigator.vendor.substring(0,3)=="App"){
setX = s.clientX+document.documentElement.lastChild.scrollLeft;
setY = s.clientY+document.documentElement.lastChild.scrollTop;
}
if(navigator.appName.substring(0,3)!="Net"){
setX = event.clientX+document.documentElement.scrollLeft
setY = event.clientY+document.documentElement.scrollTop
return false;
}
}
document.documentElement.onmousemove=tarto;

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

function sp(cen,den){

if(tour==2){    // logique
document.onmousedown=disableselecte
return false
}
if(tour==1){
px=setX
py=setY
fen=cen
zim=den
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)+"px"
document.getElementById(fen).style.top=(dide+setY-py)+"px"
document.onmousedown=disableselect

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){
ttb=["tr","ta","tb","tc","td","te","tf","tg"]  // si on rajouter des fenetre il faudra agrandir le tableau th,ti...etc
deb=1
for(i=1;i<nb_de_fenetre+1;i++){
document.getElementById(ttb[i]).style.zIndex=i
}
}
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 class="Style1" ID="ta" STYLE="top:10px;left:10px;"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 class="Style2" onmousedown=tour=1;sp('ta'); onmouseup=tour=2;></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 class="Style1" ID="tb"; STYLE="top:300px;left:10px;"onmousedown=plans('tb')>
<tr><td class="Style2" onmousedown=tour=1;sp("tb"); onmouseup=tour=2;></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 class="Style1" ID="tc" STYLE="top:10px;left:350px;"onmousedown=plans('tc')>
<tr><td class="Style2" onmousedown=tour=1;sp("tc"); onmouseup=tour=2;></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 class="Style1" ID="td"; STYLE="top:300px;left:350px;"onmousedown=plans('td')>
<tr><td class="Style2" onmousedown=tour=1;sp("td"); onmouseup=tour=2;></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 class="Style1" ID="te" STYLE="top:10px;left:700px;"onmousedown=plans('te')>
<tr><td class="Style2" onmousedown=tour=1;sp("te"); onmouseup=tour=2;></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>

<img ID="tf" src="sphinx.png"STYLE="position:absolute;top:280px;left:680px;width:300px;"onmousedown=plans('tf');tour=1;sp("tf") onmouseup=tour=2;>
</body>
</html>

Conclusion :


et çà marche très bien

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
3
Date d'inscription
mardi 28 avril 2009
Statut
Membre
Dernière intervention
27 septembre 2009

Excellent et permet de faire de belles compositions !! Et tant pis pour les non graphistes et les "pas-contents" qui trouvent cela moche. Un peu d'imagination que diable !!
Merci Kazma
Messages postés
6
Date d'inscription
mardi 1 juillet 2008
Statut
Membre
Dernière intervention
9 juillet 2011

je l'ai adopté et retranscrit sur le site de ma commune.
Encore merci
Messages postés
2
Date d'inscription
mercredi 5 juillet 2006
Statut
Membre
Dernière intervention
13 juillet 2008

génial,

je viens de l'adapter, c'est vraiment la classe =D

merci beaucoup
Messages postés
1750
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 mars 2020
65
je fait des scripts je suis pas graphiste
Messages postés
10
Date d'inscription
mardi 10 juillet 2007
Statut
Membre
Dernière intervention
26 mai 2008

C'est laid!!!!!!!!
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.