Afficher/Enlever un div onclick

Résolu

Richieddy Messages postés 12 Date d'inscription Statut Membre Dernière intervention -
Mihawk Messages postés 4315 Date d'inscription Statut Contributeur Dernière intervention - 18 avril 2013 à 22:14

Bonjour,
Ma question est sûrement simple pour vous,
J'ai créé des images, et quand on clique sur une image, on a une donnée sur la fenêtre à droite et quand on reclique à nouveau sur l'image, cette donnée disparait. Tout marche très bien sauf sur un point : Quand on clique sur plusieurs images à la fois, toutes les données apparaissent sur la même div alors qu'une seule donnée est nécessaire.
Voici mon lien au cas où vous n'auriez pas compris :
http://alexis-bienayme.fr/dota/# (Cliquer sur les 2 images à gauche)
Voici mes codes :
<html>
<head>
<title> Dota </title>
<link rel="stylesheet" href="style/style.css">
<script type="text/javascript">
function slark() {
var cible = document.getElementById('cible');
if(cible.style.display != '') {
cible.style.display = '';
} else {
cible.style.display = 'none';
}
if(document.getElementById('clock').style.visibility=="visible")
{
document.getElementById('clock').style.visibility="hidden";
}
else {
document.getElementById('clock').style.visibility="hidden";
}
}
function clock() {
var cible2 = document.getElementById('cible2');
if(cible2.style.display != '') {
cible2.style.display = '';
} else {
cible2.style.display = 'none';
}
}
</script>
</head>
<body>
<div id="header">
<img src="images/logo.png" alt="Dota" class="dota">
</div>
<div id="slark">
<a href="#"><img src="images/slark.gif" alt="Slark" onclick="slark()"></a>
<a href="#"><img src="images/clocky.gif" alt="Slark" onclick="clock()"></a>
</div>
<div id="presentation">
<div id="cible" style="display:none;">
<div class="title">Slark</div>
<div class="type">Semi-Carry</div>
<div class="gif"><img src="images/slarky.gif" alt="Slark"></div>
<div class="present">
Slark est un semi-carry, qui est rapide et capable d'attrapper des héros facilement. De plus il peut s'échapper facilement aux combats. En revanche, c'est un héros assez fragile qui possède peu de vie. Il possède quatres sorts, Dark Pact, Pounce, Essence Shift et Shadow Dance.
</div>
</div>
<div id="cible2" style="display:none;">
<div class="title">Clockwerk</div>
<div class="type">Ganker</div>
<div class="gif"><img src="images/clockwerk.gif" alt="Slark"></div>
<div class="present">
Slark est un semi-carry, qui est rapide et capable d'attrapper des héros facilement. De plus il peut s'échapper facilement aux combats. En revanche, c'est un héros assez fragile qui possède peu de vie. Il possède quatres sorts, Dark Pact, Pounce, Essence Shift et Shadow Dance.
</div>
</div>
</div>
</body>
</html>

Merci d'avance

Afficher la suite

A voir également:

Afficher/masquer div javascript onclick
Afficher appdata - Guide
Masquer conversation whatsapp - Guide
Comment masquer les amis sur facebook - Guide
Comment appeler en masquer - Guide
Telecharger javascript - Télécharger - Langages

5 réponses

Réponse 1 / 5

Mihawk Messages postés 4315 Date d'inscription Statut Contributeur Dernière intervention 846

Hello,

Pas de mystère : quand une image appelle l'affichage de sa partie dans la colonne de droite, il faut déjà qu'elle appelle les méthodes pour cacher toutes les autres !

Réponse 2 / 5

Richieddy

J'utilise donc une méthode pour fermer toutes les autres parties du genre :
function slark() {
var cible = document.getElementById('slark');
document.getElementById('clock').style.display='none';
document.getElementById('void').style.display='none';
document.getElementById('jakiro').style.display='none';
document.getElementById('tidehunter').style.display='none';
document.getElementById('terrorblade').style.display='none';
document.getElementById('rylai').style.display='none';
document.getElementById('doom').style.display='none';
document.getElementById('disruptor').style.display='none';
document.getElementById('sven').style.display='none';
document.getElementById('rhasta').style.display='none';
if(cible.style.display != '') {
cible.style.display = '';
} else {
cible.style.display = 'none';
}
}
function clock() {
var cible = document.getElementById('clock');
document.getElementById('slark').style.display='none';
document.getElementById('void').style.display='none';
document.getElementById('jakiro').style.display='none';
document.getElementById('tidehunter').style.display='none';
document.getElementById('terrorblade').style.display='none';
document.getElementById('rylai').style.display='none';
document.getElementById('doom').style.display='none';
document.getElementById('disruptor').style.display='none';
document.getElementById('sven').style.display='none';
document.getElementById('rhasta').style.display='none';
if(cible.style.display != '') {
cible.style.display = '';
} else {
cible.style.display = 'none';
}
}

la function slark et clock permettent d'ouvrir les parties slark et clock. Cependant j'utilise les methodes pour fermer les autres, ce n'est pas très joli je trouve, mais si on a un meilleur moyen je suis prenneur !

Réponse 3 / 5

Mihawk Messages postés 4315 Date d'inscription Statut Contributeur Dernière intervention 846

En fait pour être plus propre il aurait fallu nommer les div qui apparaissent/disparaissent avec des ID du genre "div1", "div2", "div3", etc... Et passer le numéro du div en paramètre de ta fonction clock() :

Exemple presque complet :

function clock(divId){  
   hideAll();  
   if (document.getElementById("div" + divId)){  
      document.getElementById("div" + divId).style.display = "";  
   } else {  
      alert ("La partie à afficher n'a pas été trouvée.");  
   }  
}  

function hideAll(){  
   var i=1;  
   while (document.getElementById("div" + i)){  
      document.getElementById("div" + i).style.display = "none";  
      i++;  
   }  
}

Voilà, plus qu'à placer les div1, div2, div3, etc... Dans ton code HTML et à modifier les méthodes onclick() de tes images pour mettre onclick="clock(1);" ou onclick="clock(2);" etc...

Amicalement,
Pierre.

Réponse 4 / 5

logisticien

Mwai ....

Perso j'aurai fait de l'ajax et à chaque clic j'aurai chargé les infos nécessaire sorti de la BDD =)

En plus ça économise la bande passante...

Mihawk Messages postés 4315 Date d'inscription Statut Contributeur Dernière intervention 846

Si c'est pour stocker 10 lignes d'infos c'est pas forcément utile...
La base de donnée ça se réserve soit à des infos très nombreuses, soit à des infos qui vont être appelées à changer régulièrement.

Et puis qui dit stockage en base dit également interface administrative pour modifier, ajouter ou supprimer les informations... Ca multiplie le temps de développement par 5 ou 6.

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

Richieddy Messages postés 12 Date d'inscription Statut Membre Dernière intervention

Effectivement, ça fonctionne ! Mon code est donc plus propre, je te remercie pour ton aide :)

Mihawk Messages postés 4315 Date d'inscription Statut Contributeur Dernière intervention 846

Au plaisir :)
Résolu ?

Discussions similaires

java script error in the main process

ne pas voir la story de quelqu'un mais sans la bloquer

Votre réponse

Discussions similaires