webide
Messages postés43Date d'inscriptionmercredi 31 août 2011StatutMembreDernière intervention31 août 2011
-
31 juil. 2005 à 17:32
GhislainLavoie
Messages postés289Date d'inscriptionvendredi 11 mars 2005StatutMembreDerniè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
// 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 &` 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>