Fenetre multiple

Télécharger le projet
Commenter

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
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (@karamel)