webide Posté 1 Août 2005 Partager Posté 1 Août 2005 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 navigateurnc4 = (document.layers)? true:false;ie4 = (document.all)? true:false;nc6 = (typeof(window.controllers) != 'undefined' && typeof(window.locationbar) != 'undefined')? true:false;// Taille de chaque déplacementvar 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éplacementvar largeur;var hauteur;var demi;// Variable recevant la boucle de déplacementvar ouverture;// Fonction de positionnement des calquesfunction init() {// Instructions pour Netscape 6 et supérieurif (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 Explorerif (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 calquesdemi = 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érieurif (nc6) {// Modification de la largeur du calque de gauche à la moitié de l'écrandocument.getElementById("gauche").style.width = demi-8;// Modification de la hauteur du calque gauche à tout l'écrandocument.getElementById("gauche").style.height = hauteur;// Instructions équivalentes pour le calque de droitedocument.getElementById("droite").style.width = demi-8;document.getElementById("droite").style.height = hauteur;// Positionnement du calque de droite àdroite de l'écrandocument.getElementById("droite").style.left = largeur-8;}// Instructions équivalentes pour Internet Explorerif (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 calquesfunction change() {// Tant que le calque est plus large qu'une demi-imageif ( demi > tailleImage ) {// Instructions pour Netscape 6 et supérieurif (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 droitedocument.getElementById("droite").style.width = demi-8;// Déplacement du calque de droite pour simuler l'ouverturedocument.getElementById("droite").style.left = largeur*2-demi-8;}// Instructions équivalentes pour Internet Explorerif (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-imageselse {// Arrêt de la boucleclearTimeout(ouverture);// Lancement de la fonction de disparition des calquesdisp();}}// Fonction de disparition des calquesfunction disp() {// Instructions pour Netscape 4.xif (nc4) {// Masquage du calque de gauchedocument.gauche.visibility = 'hidden';// Idem pour celui de droitedocument.droite.visibility = 'hidden';// Positionnement du calque de droite &` gauche de l'écran pour éviter les ascenceurs horizontauxdocument.droite.left = 0;}// Instructions équivalentes pour Internet Explorerif (ie4) {gauche.style.visibility = 'hidden';droite.style.visibility = 'hidden';droite.style.left = 0;}// Instructions équivalentes pour Netscape 6 et supérieurif (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 --><div name="gauche" id="gauche" style="position: absolute; left: 0px; top: 0px; visibility: visible; z-index: 1; background-color: #FFFFFF;"><table border="0" cellspacing="0" cellpadding="0" height="100%" align="right"><tr><!-- Lancement de la fonction de déplacement des calques sur clic sur l'image --><td><a href="#" OnClick="change();"><img src="images/ecrin.jpg" border="0"></a></td></tr></table></div><!-- Calque de droite --><div name="droite" id="droite" style="position: absolute; left: 0px; top: 0px; visibility: visible; z-index: 1; background-color: #FFFFFF;"><table border="0" cellspacing="0" cellpadding="0" height="100%"><tr><!-- Lancement de la fonction de déplacement des calques sur clic sur l'image --><td><a href="#" OnClick="change();"><img src="images/ecrin1.jpg" border="0"></a></td></tr></table></div><!-- Lancement du positionnement des calques (après les avoir écrit) --><script>init();</script> Merci d'avance webide Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant