<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 &&grave; 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>

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