Afficher/Enlever un div onclick

Résolu/Fermé

Richieddy Messages postés 12 Date d'inscription lundi 24 décembre 2012 Statut Membre Dernière intervention 18 août 2013 - 12 avril 2013 à 19:50
Mihawk Messages postés 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 - 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

A voir également:

Afficher/masquer div javascript onclick
Masquer conversation whatsapp - Guide
Telecharger javascript - Télécharger - Langages
Afficher mot de passe wifi android - Guide
Appel masquer - Guide
Comment masquer les amis sur facebook - Guide

5 réponses

Réponse 1 / 5

Mihawk Messages postés 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
17 avril 2013 à 22:55

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
17 avril 2013 à 23:06

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 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
Modifié par Mihawk le 17/04/2013 à 23:43

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
18 avril 2013 à 22:02

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 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
18 avril 2013 à 22:04

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 lundi 24 décembre 2012 Statut Membre Dernière intervention 18 août 2013
18 avril 2013 à 22:04

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

Mihawk Messages postés 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
18 avril 2013 à 22:14

Au plaisir :)
Résolu ?

Discussions similaires

Afficher toutes les lignes masquées excel

Javascript Arrondi à 2 chiffres après la virgule

java script error in the main process

programme qui n'affiche pas le mot secret

Discussions similaires

Newsletters