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>
<body>
<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 &` 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 -->
<div name="haut" id="haut" style="position: absolute; left: 0px; top: 0px; visibility: visible; z-index: 1; background-color: red;">
<table border="0" cellspacing="0" cellpadding="0" height="100%" width="100%" >
<tr>
<!-- Lancement de la fonction de déplacement des calques sur clic sur l'image -->
<td valign="bottom" align="center"><a href="#" OnClick="change();"><img src="images/ecrin.jpg" border="0"></a></td>
</tr>
</table>
</div>
<!-- Calque de bas -->
<div name="bas" id="bas" style="position: absolute; left: 0px; top: 0px; visibility: visible; z-index: 1; background-color: blue;">
<table border="0" cellspacing="0" cellpadding="0" height="100%" width="100%">
<tr>
<!-- Lancement de la fonction de déplacement des calques sur clic sur l'image -->
<td valign="top" align="center"><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>
</body>
</html>