11542 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
Je suis sur un projet d'école. Je veux faire afficher plein d'icones sur une page, et quand on clique sur une des icones, on a une donnée très précise qui apparait à droite de la page. Je n'ai aucun problème jusque là, sauf que quand je clique sur plusieurs icones à la fois, plusieurs données apparaissent en meme temps. Voici mon site si vous voulez jeter un coup d'oeil : http://alexis-bienayme.fr/dota/

Mon code
<html>
<head>
<title> Dota </title>
<link rel="stylesheet" href="style/style.css">
<script type="text/javascript">
    function slark() {
      var cible = document.getElementById('slarky');
      if(cible.style.display != '') {
        cible.style.display = '';
      } else {
        cible.style.display = 'none';
      }
    }
    function clock() {
        var cible = document.getElementById('clocky');
      if(cible.style.display != '') {
        cible.style.display = '';
      } else {
        cible.style.display = 'none';
      }
     }

</script>

</head>
<body>
	<div id="header">
<img src="images/logo.png" alt="Dota" class="dota">
</div>
<div id="heroes">
<a href="#"><img src="images/slark/slark.gif" alt="Slark" onclick="slark()"></a>
<a href="#"><img src="images/clockwerk/clocky.gif" alt="Slark" onclick="clock()"></a>

<div id="presentation">
	<div id="slarky" style="display:none;">
      <div class="title">Slark</div>
 		   <div class="type">Semi-Carry</div>
 		   <div class="gif"><img src="images/slark/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 utilisant son ultime qui lui permet de devinir invisible. 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 class="sorts"> Sorts</div>
    <div class="sorts_icon">
      <a href="javascript:visibilite('dark_pact');"><img src="images/slark/dark_pact.jpg" alt="Dark pact" width="48px"
  height="48px"></a>
      <a href="javascript:visibilite('pounce');"><img src="images/slark/pounce.jpg" alt="Pounce"  width="48px"
  height="48px"></a>
   <a href="javascript:visibilite('essence_shift');"><img src="images/slark/essence_shift.jpg" alt="Essence Shift"  width="48px"
  height="48px"></a>
  <a href="javascript:visibilite('shadow_dance');"><img src="images/slark/shadow_dance.jpg" alt="Shadow Dance"  width="48px"
  height="48px"></a>
    </div>
    <div id="dark_pact" class="sorts_desc" style="display:none;">
      Dark pact est un sort à double tranchant. Vous blesserez des ennemis à condition qu'ils soient proches de vous, mais en revanche vous sacrifierez la moitié de HP que vous infligerez aux ennemis. De plus ce sort enlève des sorts négatifs, tel que le poison, ou les dusts.
    </div>
    <div id="pounce" class="sorts_desc" style="display:none;">
      Ce sort vous permet de sauter, ce qui est utile pour s'échapper, mais qui permet également d'attrapper un ennemi, et de lui créer une chaine qui l'empêchera de fuir pendant 3,5 secondes.
    </div>
    <div id="essence_shift" class="sorts_desc" style="display:none;">
      Essence shift est un excellent sort passif, qui vous permet de voler des attributs ennemies en les frappant, pour les convertir en 4 agilités. Chaque coup donné aux héros vous confère +4 agilités, pour une durée de 15 secondes à 2 minutes.
    </div>
     <div id="shadow_dance" class="sorts_desc" style="display:none;">
      Passif : Ce sort vous confère un certain % de vie récuperé par seconde et de vitesse uniquement si vous êtes hors vue des ennemis, plus précisement si les ennemis ne vous voient pas.<br />
      Actif : Ce sort vous rend invisible pendant 5,5 secondes, laissant un brouillard noir sur vous, permettant aux ennemis de connaître votre position même s'ils ne peuvent pas forcément vous voir. De plus vous pouvez attaquer en restant invisible.
    </div>
   
	</div>
	<div id="clocky" style="display:none;">
    	<div class="title">Clockwerk Goblin</div>
 		<div class="type">Ganker</div>
 		<div class="gif"><img src="images/clockwerk/clockwerk.gif" alt="Slark"></div>
 		<div class="present">
 			Clockwerk est un excellent ganker, capable d'attrapper et d'emprisonner ses ennemis pour les achever. De plus il possède des missiles qui peuvent être envoyées n'importe où.
 		</div>
    <div class="sorts"> Sorts</div>
    <div class="sorts_icon">
      <a href="javascript:visibilite('battery_assault');"><img src="images/clockwerk/battery_assault.gif" alt="Battery assault" width="48px"
  height="48px"></a>
      <a href="javascript:visibilite('power_cogs');"><img src="images/clockwerk/power_cogs.gif" alt="Power cogs"  width="48px"
  height="48px"></a>
   <a href="javascript:visibilite('rocket_flare');"><img src="images/clockwerk/rocket_flare.gif" alt="Rocket flare"  width="48px"
  height="48px"></a>
  <a href="javascript:visibilite('hookshot');"><img src="images/clockwerk/hookshot.gif" alt="Hookshot"  width="48px"
  height="48px"></a>
    </div>
    <div id="battery_assault" class="sorts_desc" style="display:none;">
     Ce sort vous permet de lancer des petits attaques répétitives qui peuvent étourdir et blesser un ennemi proche de Clockwerk pendant 0.7 secondes, le tout durant 10,5 secondes. 
    </div>
    <div id="power_cogs" class="sorts_desc" style="display:none;">
      Ce sort créé une sorte de cage autour de vous, vous permettant d'emprisonner l'ennemi. Ces power cogs peuvent créer une décharge aux ennemies s'y approchant, leur faisant perdre de la mana et de la vie. Un power cog peut être détruit en 3 coups par l'ennemi, et en 1 seul coup par Clockwerk.
    </div>
    <div id="rocket_flare" class="sorts_desc" style="display:none;">
      Ce sort lance un missile qui peut être envoyé n'importe où, et qui peut faire des dégats aux ennemis d'y trouvant. De plus il confère à Clockwerk une vision de l'endroit où la missile a été envoyée pendant 10 secondes.
    </div>
     <div id="hookshot" class="sorts_desc" style="display:none;">
     Cet ultime permet à Clockwerk de lancer un grappin et de l'utiliser contre des ennemis ou alliés. Clockwerk sera attiré par la personne touchée par ce grappin, et cette personne sera étourdie pendant 2 secondes. Ce grappin possède un range de 3000 maximum.
    </div>
	</div>
   <script>
    var divPrecedent=document.getElementById('dark_pact');
    var divPrecedent=document.getElementById('battery_assault');
    function visibilite(divId)
    {
        divPrecedent.style.display='none';
        divPrecedent=document.getElementById(divId);
        divPrecedent.style.display='';
    }
</script>	
</div>
</div>
</body>
</html>


Que faire, s'il vous plait ? Merci d'avance
Modifié par Richie (14 Apr 2013 - 15:23)