Sujet Précédent Sujet Suivant

Open/close d'une <div> problème !

martine et chantal Messages postés 517 Statut Membre -
martine et chantal Messages postés 517 Statut Membre - 30 juin 2010 à 19:42

Bonjour,

J'ai un soucis de javascript (voir de CSS) : je ne sais pas d'où vient le pb.
Sur mon site, des cubes sont cliquables.
Pour l'organisation j'ai désiré qu'un seul lien puisse s'ouvrir à la fois.
Pour le moment seulement 3 cubes sont en service
Le cube de droite (cube-contact) comporte 2 liens.

Le soucis est le suivant :

Lorsque le cube-contact est ouvert et que l'on clique sur un autre cube, le cube-contact se ferme. Jusqu'ici pas de PB. cette action est désirée
Mais lorsqu'on ré-ouvre le cube-contact, les 2 liens (myspace/facebook) ne fonctionne plus.

Je n'arrive pas à trouver la solution. Quelqu'un aurait une idée ?
Je laisse les vraies URL pour que vous y voyez plus clair.
merci d'avance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Groupe</title>

<style type="text/css">
body {
background-image: url("http://i710.photobucket.com/albums/ww103/essamm/STE%20ESSAM/CUBES.jpg");
background-repeat: no-repeat;
background-position: 50% 25% ;
background-attachment: fixed;
background-color: black;
color: white;

}

.cubedates { position: absolute; top:50%; left:50%; margin-top: -165px; margin-left: -98px; z-index:2; }
.cubereleases { position: absolute; top:50%; left:50%; margin-top: -165px; margin-left: -24px; z-index:2;}
.cubecontact { position: absolute; top:50%; left:50%; margin-top: -158px; margin-left: 74px; z-index:2; }

.lesdates { position: absolute; top:50%; left:50%; margin-top: 40px; margin-left: -140px; z-index:2; }
.releases { position: absolute; top:50%; left:50%; margin-top: 30px; margin-left: -170px; z-index:2; }
.contact { position: absolute; top:50%; left:50%; margin-top: 30px; margin-left: -260px; z-index:2; }
.myspace { position: absolute; top:50%; left:50%; margin-top: -4px; margin-left: -155px; z-index:2; }
.facebook { position: absolute; top:50%; left:50%; margin-top: 95px; margin-left: -94px; z-index:2; }
</style>

<script type="text/javascript">
function toggle1() {
var div1 = document.getElementById('div1');
div1.style.display = (div1.style.display == 'none') ? 'block' : 'none' ;
document.getElementById('div2').style.display = "none";
document.getElementById('div3').style.display = "none";
}

function toggle2() {
var div2 = document.getElementById('div2') ;
div2.style.display = (div2.style.display == 'none') ? 'block' : 'none' ;
document.getElementById('div1').style.display = "none";
document.getElementById('div3').style.display = "none";
}

function toggle3() {
var div3 = document.getElementById('div3') ;
div3.style.display = (div3.style.display == 'none') ? 'block' : 'none' ;
document.getElementById('div1').style.display = "none";
document.getElementById('div2').style.display = "none";
}

function toggle4() {
var div4 = document.getElementById('div4') ;
div4.style.display = (div4.style.display == 'none') ? 'block' : 'none' ;
}
function toggle5() {
var div5 = document.getElementById('div5') ;
div5.style.display = (div5.style.display == 'none') ? 'block' : 'none' ;
}
</script>
</head>
<body>

<div class="cubedates">
<a href="#" onclick="toggle1(); return false;">
<img src="http://i710.photobucket.com/albums/ww103/essamm/STE%20ESSAM/cube.gif" alt="" style="border:0px;" />
</a>

<div class="lesdates" id="div1" style="display:none">
<img src="http://i710.photobucket.com/albums/ww103/essamm/STE%20ESSAM/DATES.jpg" alt="" style="border:0px;" />
</div>
</div>

<div class="cubereleases">
<a href="#" onclick="toggle2(); return false;">
<img src="http://i710.photobucket.com/albums/ww103/essamm/STE%20ESSAM/cube.gif" alt="" style="border:0px;" />
</a>

<div class="releases" id="div2" style="display:none;">
<img src="http://i710.photobucket.com/albums/ww103/essamm/STE%20ESSAM/RELEASES.jpg" alt="" style="border:0px;" />
</div>
</div>

<div class="cubecontact">
<a href="#" onclick="toggle3(); toggle4(); toggle5(); return false;">
<img src="http://i710.photobucket.com/albums/ww103/essamm/STE%20ESSAM/cube.gif" alt="" style="border:0px;" />
</a>

<div class="contact" id="div3" style="display:none;">
<img src="http://i710.photobucket.com/albums/ww103/essamm/STE%20ESSAM/CONTACT.jpg" alt="" style="border:0px;" />
</div>
</div>

<div class="myspace" id="div4" style="display:none;">
<a href="https://myspace.com/essa.m" onclick="window.open(this.href); return false;">
<img src="http://i710.photobucket.com/albums/ww103/essamm/STE%20ESSAM/cube.gif" alt="" style="border:0px;" />
</a>
</div>

<div class="facebook" id="div5" style="display:none;">
<a href="http://www.facebook.com/pages/ESSAM/385664616240" onclick="window.open(this.href); return false;">
<img src="http://i710.photobucket.com/albums/ww103/essamm/STE%20ESSAM/cube.gif" alt="" style="border:0px;" />
</a>
</div>

</body>
</html>

Afficher la suite

A voir également:

Open/close d'une <div> problème !
Open office gratuit - Télécharger - Suite bureautique
Open core legacy patcher - Accueil - MacOS
Open sankoré - Télécharger - Bureautique
Open workbench - Télécharger - Gestion de projets
Open dns - Guide

1 réponse

Réponse 1 / 1

martine et chantal Messages postés 517 Statut Membre 4

Je m'aperçois que les liens fonctionnent 1 fois sur 2 lorsqu'on ouvre plusieurs fois de suite les cubes.
Cela prouve que les liens (myspace/facebook) s'ouvrent et se ferment en cliquant sur les autres cubes.
Il faut donc que je trouve la manière d'ouvrir les DIV (myspace/facevook) à chaque ouverture du cube attribué (CUBE-CONTACT)

Open/close d'une <div> problème !

1 réponse

Votre réponse

Discussions similaires

Newsletters