Ouverture rideau

webide Messages postés 43 Date d'inscription mercredi 31 août 2011 Statut Membre Dernière intervention 31 août 2011 - 31 juil. 2005 à 17:32
GhislainLavoie Messages postés 289 Date d'inscription vendredi 11 mars 2005 Statut Membre Dernière intervention 3 avril 2008 - 31 juil. 2005 à 18:30
Bonjour,
Je souhaite modifier un script permettant d'ouvrir une page sous forme de rideau mais au lieu de faire cela du centre vers gauche et droite , le faire du centre vers haut et bas.
Voici le script
dans le head:
<script language="JavaScript">
// détection du navigateur
nc4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
nc6 = (typeof(window.controllers) != 'undefined' && typeof(window.locationbar) != 'undefined')? true:false;

// Taille de chaque déplacement
var pas = 3;

// Délai entre chaque déplacement (en millisecondes)
var delai = 5;

// Largeur de chaque 'demi-image'
var tailleImage = 67;

// Variables recevant les différentes valeurs lors du déplacement
var largeur;
var hauteur;
var demi;

// Variable recevant la boucle de déplacement
var ouverture;


// Fonction de positionnement des calques
function init() {

// Instructions pour Netscape 6 et supérieur
if (nc6) {

// Largeur des calques (la moitié de la largeur du navigateur)
largeur = Math.round(window.innerWidth/2);

// Hauteur des calques (hauteur interne du navigateur)
hauteur = window.innerHeight;
}

// Instructions équivalentes pour Internet Explorer
if (ie4) {
largeur = Math.round(document.body.clientWidth/2);
hauteur = document.body.clientHeight;
}

// On affecte la demi-largeur à la variable demi qui donnera la largeur des calques
demi = largeur;

// Pour Netscape 4.x on masque d'office les calques (le script ne fonctionnant pas)
if (nc4) {
disp();
}

// Instructions pour Netscape 6 et supérieur
if (nc6) {

// Modification de la largeur du calque de gauche à la moitié de l'écran
document.getElementById("gauche").style.width = demi-8;

// Modification de la hauteur du calque gauche à tout l'écran
document.getElementById("gauche").style.height = hauteur;

// Instructions équivalentes pour le calque de droite
document.getElementById("droite").style.width = demi-8;
document.getElementById("droite").style.height = hauteur;

// Positionnement du calque de droite àdroite de l'écran
document.getElementById("droite").style.left = largeur-8;
}

// Instructions équivalentes pour Internet Explorer
if (ie4) {
gauche.style.width = demi;
gauche.style.height = hauteur;
droite.style.width = demi;
droite.style.height = hauteur;
droite.style.left = largeur;
}
}


// Fonction de déplacement et de retaillage des calques
function change() {

// Tant que le calque est plus large qu'une demi-image
if ( demi > tailleImage ) {

// Instructions pour Netscape 6 et supérieur
if (nc6) {

// Changement de la largeur du calque de gauche à la taille de 'demi'
document.getElementById("gauche").style.width = demi-8;

// De même pour le calque de droite
document.getElementById("droite").style.width = demi-8;

// Déplacement du calque de droite pour simuler l'ouverture
document.getElementById("droite").style.left = largeur*2-demi-8;
}

// Instructions équivalentes pour Internet Explorer
if (ie4) {
gauche.style.width = demi;
droite.style.width = demi;
droite.style.left = largeur*2-demi;
}

// Changement de la valeur de 'demi'
demi -= pas;

// Relance de la fonction selon le délai déterminé (boucle)
ouverture = setTimeout("change()",delai);
}

// Si les calques sont moins larges que les demi-images
else {

// Arrêt de la boucle
clearTimeout(ouverture);

// Lancement de la fonction de disparition des calques
disp();
}
}


// Fonction de disparition des calques
function disp() {

// Instructions pour Netscape 4.x
if (nc4) {

// Masquage du calque de gauche
document.gauche.visibility = 'hidden';

// Idem pour celui de droite
document.droite.visibility = 'hidden';

// Positionnement du calque de droite &` gauche de l'écran pour éviter les ascenceurs horizontaux
document.droite.left = 0;
}

// Instructions équivalentes pour Internet Explorer
if (ie4) {
gauche.style.visibility = 'hidden';
droite.style.visibility = 'hidden';
droite.style.left = 0;
}

// Instructions équivalentes pour Netscape 6 et supérieur
if (nc6) {
document.getElementById('gauche').style.visibility = 'hidden';
document.getElementById('droite').style.visibility = 'hidden';
document.getElementById('droite').style.left = 0;
}
}
</script>

Dans le body
<!-- Calque de gauche -->


<!-- Lancement de la fonction de déplacement des calques sur clic sur l'image -->





<!-- Calque de droite -->


<!-- Lancement de la fonction de déplacement des calques sur clic sur l'image -->





<!-- Lancement du positionnement des calques (après les avoir écrit) -->
<script>init();</script>
Merci d'avance
webide

1 réponse

GhislainLavoie Messages postés 289 Date d'inscription vendredi 11 mars 2005 Statut Membre Dernière intervention 3 avril 2008 3
31 juil. 2005 à 18:30
Salut!

J'ai changer le code pour que le script puisse ouvrir dans l'autre sens.

A+, Ghislain


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<STYLE type= "text/css">
</STYLE>
<script type="text/javascript">
</script>
</head>

<script language="JavaScript">
// détection du navigateur
nc4 = (document.layers)? true : false;
ie4 = (document.all)? true:false;
nc6 = (typeof(window.controllers) != 'undefined' && typeof(window.locationbar) != 'undefined')? true : false;

// Taille de chaque déplacement
var pas = 3;

// Délai entre chaque déplacement (en millisecondes)
var delai = 5;

// Largeur de chaque 'demi-image'
var tailleImage = 67;

// Variables recevant les différentes valeurs lors du déplacement
var largeur;
var hauteur;
var demi;

// Variable recevant la boucle de déplacement
var ouverture;

// Fonction de positionnement des calques
function init() {

// Instructions pour Netscape 6 et supérieur
if (nc6) {

// Largeur des calques (la moitié de la largeur du navigateur)
largeur = window.innerWidth;

// Hauteur des calques (hauteur interne du navigateur)
hauteur = Math.round(window.innerHeight/2);
}

// Instructions équivalentes pour Internet Explorer
if (ie4) {
largeur = document.body.clientWidth;
hauteur = Math.round(document.body.clientHeight/2);
}

// On affecte la demi-largeur à la variable demi qui donnera la hauteur des calques
demi = hauteur

// Pour Netscape 4.x on masque d'office les calques (le script ne fonctionnant pas)
if (nc4) {
disp();
}

// Instructions pour Netscape 6 et supérieur
if (nc6) {

// Modification de la hauteur du calque de haut à tout l'écran
document.getElementById("haut").style.width = largeur;

// Modification de la hauteur du calque haut à la moitié de l'écran
document.getElementById("haut").style.height = demi-8;

// Instructions équivalentes pour le calque de bas
document.getElementById("bas").style.width = largeur;
document.getElementById("bas").style.height = demi-8;

// Positionnement du calque du bas a la moitié de l'écran
document.getElementById("bas").style.top = demi-8;
}

// Instructions équivalentes pour Internet Explorer
if (ie4) {
haut.style.width = largeur;
haut.style.height = demi;
bas.style.width = largeur;
bas.style.height = demi;
bas.style.top = demi;
}
}

// Fonction de déplacement et de retaillage des calques
function change() {

// Tant que le calque est plus large qu'une demi-image
if ( demi > tailleImage ) {

// Instructions pour Netscape 6 et supérieur
if (nc6) {

// Changement de la hauteir du calque de haut à la taille de 'demi'
document.getElementById("haut").style.height = demi-8;

// De même pour le calque de bas
document.getElementById("bas").style.height = demi-8;

// Déplacement du calque de bas pour simuler l'ouverture
document.getElementById("bas").style.top = hauteur*2-demi-8;
}

// Instructions équivalentes pour Internet Explorer
if (ie4) {
haut.style.height = demi;
bas.style.height = demi;
bas.style.top = hauteur*2-demi;
}

// Changement de la valeur de 'demi'
demi - = pas;

// Relance de la fonction selon le délai déterminé (boucle)
ouverture = setTimeout("change()",delai);
}

// Si les calques sont moins larges que les demi-images
else {

// Arrêt de la boucle
clearTimeout(ouverture);

// Lancement de la fonction de disparition des calques
disp();
}
}

// Fonction de disparition des calques
function disp() {

// Instructions pour Netscape 4.x
if (nc4) {

// Masquage du calque de haut
document.haut.visibility = 'hidden';

// Idem pour celui de bas
document.bas.visibility = 'hidden';

// Positionnement du calque de bas &&grave; haut de l'écran pour éviter les ascenceurs horizontaux
document.bas.left = 0;
}

// Instructions équivalentes pour Internet Explorer
if (ie4) {
haut.style.visibility = 'hidden';
bas.style.visibility = 'hidden';
bas.style.left = 0;
}

// Instructions équivalentes pour Netscape 6 et supérieur
if (nc6) {
document.getElementById('haut').style.visibility = 'hidden';
document.getElementById('bas').style.visibility = 'hidden';
document.getElementById('bas').style.left = 0;
}
}
</script>

Dans le body
<!-- Calque de haut -->

"haut" id ="haut" style="position: absolute; left: 0px; top: 0px; visibility: visible; z-index: 1; background-color: red;">
border=\"0\" cellspacing=\"0\" cellpadding=\"0\" height=\"100%\" width=\"100%\" >
----

<!-- Lancement de la fonction de déplacement des calques sur clic sur l'image -->
valign="bottom" align="center">,

<!-- Calque de bas -->

"bas" id="bas" style="position: absolute; left: 0px; top: 0px; visibility: visible; z-index: 1; background-color: blue;">
border=\"0\" cellspacing=\"0\" cellpadding=\"0\" height=\"100%\" width=\"100%\">
----

<!-- Lancement de la fonction de déplacement des calques sur clic sur l'image -->
valign="top" align="center">,

<!-- Lancement du positionnement des calques (après les avoir écrit) -->
<script>init();</script>

</html>
0
Rejoignez-nous