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 -->
<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
