IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

OnClick sur une image ?


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Septembre 2006
    Messages
    38
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2006
    Messages : 38
    Points : 29
    Points
    29
    Par défaut OnClick sur une image ?
    Alors, j'ai depuis peu commencer un projet d'un jeu en PHP+Mysql avec un peu de javascript (surtout un peu car je sais pas tellement en faire faute d'apprentissage lors de mes deux années de bts informatique ) .

    Dans le cadre du jeu, chaque héros possède un inventaire avec un certains nombre d'objet. Chaque objet à plusieurs attribut comme le nom,ses effets, et surtout la description (vous allez comprendre d'ou viens le surtout).

    Alors voila, j'arrive parfaitement à afficher l'inventaire de mon personnage mais l'affichage de la ou des descriptions me pose problème, explication : J'avais d'abord simplement utiliser la méthode $_GET pour réactualiser la page et ainsi, via une fonction toute bete qui chercher la description de l'objet, afficher ma description. Le problème avec cette méthode c'est que pour chaque clique sur un objet on doit recharger entièrement la page...et donc...j'aimerais faire mieux que ca. On ma suggerer la solution suivante, en utilisant javascript et php :
    - 1) Faire une fonction qu'on lance à l'évènement onLoad pour Remplir un tableau avec les descriptions des objets ( sour le format tab[id de l'objet dans ma table] = description de l'objet )
    - 2) Utiliser ce tableau dans les évènements OnClick sur mes images pour faire changer le texte dans une division ( <img src='$src' OnClick='AfficheTab(id_de_mon_objet)')

    Voila, j'ai donc essayer et la première partie semble fonctionner mais pas la seconde et j'ai beau faire, je ne trouve pas le problème.

    Voici les sources pour y voir plus claire :
    page: index2.php
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
     
    <?
    session_start();
    include("./fonc/fonctions.php");
     
    ?>
     
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    	<head>
           <title>Mana'adventure</title>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	   <link rel="stylesheet" media="screen" type="text/css" title="Mana1" href="design.css" />
    		<? if($_GET['java'] == "ON") include("./fonc/java1.php"); ?>
     
    	</head>
     
    	<body onLoad='RemplirTab()'>
    		<div id="page">
    			<?
    			//include("./partsindex2/head.php");
     
     
    			connec();
    			include("./partsindex2/menu.php");
    			?>
     
    			<div id="corps">
     
    			<?
    					switch($_GET['page'])
    					{
    						case "etat":
    						default: include("./status.php");
    								 break;
     
     
     
    					}
    			?>
    			</div>
     
    				<? 
    					//include("./partsindex2/foot.php"); 
    					mysql_close();
    				?>
     
    		</div>
    	</body>
     
    </html>
    page java1.php
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
     
    <script Language="JavaScript">
    var tab = new array();
     
    function RemplirTab() //a lancer au chargement de la page
    {
    	int id;
     
    	<?
    		connec();
    			$reponse = mysql_query("SELECT * FROM madv_equipements WHERE 1");
    			while($equip = mysql_fetch_array($reponse))
    			{
    				$des = $equip['description'];
     
    				?>tab[<? echo $equip['ID'];?>] ='<? echo $des; ?>';<?				
    			}	
    	?>
     
    }
    function test()
    {
    	alert("test");
    }
     
    function AfficheTab(j) //a lancer a OnClick de l'image
    {
    		document.getElementById("description").innerHTML="<i>"+tab[j]+"</i>";
    		<? echo "fokkk"; ?>
    }
     
     
    </script>
    page status.php
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    <?
     
    $infox = GetPlayerHeros($_SESSION['log']);
     
    $barres[0] = $infox['hp/hpmax'];
    $barres[1] = $infox['mp/mpmax'];
    $barres[2] = $infox['ap'];
    $barres[3] = $infox['xp/xpneeded'];
     
    //echo "<img src=".$infox['img']." class='imagejob'>";
    echo "<div>";
    echo "<table id='mytablefiche' width='400' cellspacing='0' border='0'>";
    echo "<tr id='tr_color' ><td colspan='4' align='center'>".$_SESSION['log']."</td></tr>";
     
     
    ?>
     
      <tr> 
        <td width="10%" rowspan="4" align="center"><img src=<?=$infox['img'];?>></td>
        <td width="25%" align="center"><u><b>Profession :</u></b></td>
        <td colspan="2" width="25%" align="center"><?echo $infox['job'];?></td>
      </tr>
      <tr> 
        <td align="center"><u><b>Village Natal :</u></b></td>
        <td colspan="2" align="center"><?echo $infox['town'];?></td>
      </tr>
      <tr> 
        <td align="center"><u><b>Position actuel:</u></b></td>
        <td colspan="2" align="center"><?echo $infox['position'];?></td>
      </tr>
      <tr> 
        <td align="center"><u><b>Niveau actuel:</u></b></td>
        <td colspan="2" align="center"><?echo $infox['level'];?></td>
      </tr>
     
    <?
     
     
    //echo "<tr><td rowspan='4' colspan='2' align='center'><img src=".$infox['img']."></td><td colspan='1' align='left'><b>Profession :</b></td><td>".$_SESSION['job']."</td></tr>";
    //echo "<tr><td colspan='2' align='left'><b>Village natal:</b></td><td colspan='2'>".$infox['town']."</td></tr>";
    //echo "<tr><td colspan='2' align='center'><b>Position actuel:</b></td><td colspan='2'>".$infox['position']."</td></tr>";
    //echo "<tr><td colspan='2' align='center'><b>Niveau actuel :</b></td><td colspan='2'>".$_SESSION['level']."</td></tr>";
     
    //AfficheBarres(1,$barres,5,3);
    echo "<tr><td colspan='4'><hr></td></tr>";
    echo "<tr><td><b>Force :</b></td><td>".$infox['str']."</td><td><b>Attaque :</b></td><td>ATK</td></tr>";
    echo "<tr><td><b>Agilité :</b></td><td>".$infox['agi']."</td><td><b>Defense :</b></td><td>DEF</td></tr>";
    echo "<tr><td><b>Vitalité :</b></td><td>".$infox['vit']."</td><td><b>Evasion :</b></td><td>EVA</td></tr>";
    echo "<tr><td><b>Intelligence :</b></td><td>".$infox['esp']."</td><td><b>Def Magique :</b></td><td>MATK</td></tr>";
    echo "<tr><td><b>Esprit :</b></td><td>".$infox['int']."</td><td><b>Atk Magique :</b></td><td>MDEF</td></tr>";
    echo "<tr><td><b>Chance :</b></td><td>".$infox['luk']."</td><td><b>Précision :</b></td><td>HIT</td></tr>";
    echo "</table>";
     
     
    //equipement
     
    $equip = GetPlayerEquipement($_SESSION['log']);
     
    $ne = "<img src='./images/ne.gif' title='NON EQUIPE'>";
     
     
    echo "<table id='mytablequip' cellspacing='0' border='0'>";
    echo "<tr id='tr_color'><td align='center' colspan='3'>Equipement</td></tr>";
     
    if($equip['arme']['effet'] != NULL) echo "<tr><td id='padding'><u>Arme :</u>  <b></td><td align='center'><b>ATK+".$equip['arme']['effet']."</b></td><td align='center'> <img src=".$equip['arme']['img']." title='".$equip['arme']['name']."'> </td></tr>";
    else echo "<tr><td id='padding'><u>Arme :</u>  <b></td><td align='center'><b> N/E </b></td><td align='center'>$ne</td></tr>";
     
    if($equip['casque']['effet'] != NULL) echo "<tr><td id='padding'><u>Casque :</u>  <b></td><td align='center'><b>DEF+".$equip['casque']['effet']."</b></td><td align='center'> <img src=".$equip['casque']['img']." title='".$equip['casque']['name']."'> </td></tr>";
    else echo "<tr><td id='padding'><u>Casque :</u>  <b></td><td align='center'><b>N/E</b></td><td align='center'>$ne </td></tr>";
     
    if($equip['armure']['effet'] != NULL) echo "<tr><td id='padding'><u>Armure :</u>  <b></td><td align='center'><b>DEF+".$equip['armure']['effet']."</b></td><td align='center'> <img src=".$equip['armure']['img']." title='".$equip['armure']['name']."'> </td></tr>";
    else echo "<tr><td id='padding'><u>Armure :</u>  <b></td><td align='center'><b> N/E</b></td><td align='center'>$ne  </td></tr>";
     
    if($equip['bouclier']['effet'] != NULL) echo "<tr><td id='padding'><u>Bouclier :</u>  <b></td><td align='center'><b>DEF+".$equip['bouclier']['effet']."</b></td><td align='center'> <img src=".$equip['bouclier']['img']." title='".$equip['bouclier']['name']."'> </td></tr>";
    else echo "<tr><td id='padding'><u>Bouclier :</u>  <b></td><td align='center'><b>N/E</b></td><td align='center'>$ne </td></tr>";
    //echo "<tr><td id='padding'><u>Bottes :</u>  <b></td><td><b>Defense+".$equip['pied']['effet']."</b></td><td align='center'> <img src=".$equip['pied']['img']." title='".$equip['pied']['name']."'> </td></tr>";
     
    $acc1 = explode(";",$equip['acc1']['effet']);
    $effetacc1 = "DEF+".$acc1[0]." MDEF+".$acc1[1];
    $acc2 = explode(";",$equip['acc2']['effet']);
    $effetacc2 = "DEF+".$acc2[0]." MDEF+".$acc2[1];
    if($equip['acc1']['effet'] != NULL) echo "<tr><td id='padding'><u>Acc1 :</u>  <b></td><td align='center'><b>".$effetacc1."</b></td><td align='center'> <img src=".$equip['acc1']['img']." title='".$equip['acc1']['name']."'> </td></tr>";
    else  echo "<tr><td id='padding'><u>Acc1 :</u>  <b></td><td align='center'><b>N/E</b></td><td align='center'>$ne  </td></tr>";
     
    if($equip['acc2']['effet'] != NULL)echo "<tr><td id='padding'><u>Acc2 :</u>  </td><td align='center'><b>".$effetacc2."</b></td><td align='center'> <img src=".$equip['acc2']['img']." title='".$equip['acc2']['name']."'> </td></tr>";
    else echo "<tr><td id='padding'><u>Acc2 :</u>  </td><td align='center'><b>N/E</b></td><td align='center'> $ne </td></tr>";
    echo "</table>";
    echo "<br></div><br>";
     
    $inventaire = GetPlayerInventaire($log);
    echo "<table id='mytableinv' width='100%' cellspacing='0' border='1'>";
    echo "<tr id='tr_color'><td align='center' colspan='100'>Inventaire</td></tr>";
     
     
     
     
     
     
     
    echo "<tr><td colspan=50>";
    $i=0;
    while($i<$inventaire['nbrtypeobj']+1)
    {
    	$title = $inventaire[$i]['name']."(x".$inventaire[$i]['nombre'].")";
    	$id = $inventaire[$i]['id'];
     
    	echo "<img src=".$inventaire[$i]['img']." title='".$title."' OnClick='AfficheTab(".$id.");'>";  
    	//echo "<script type='text/javascript'><img src=".$inventaire[$i]['img']." title='".$title."' OnClick='AfficheTabyoupi);'>";  
    	$i++;
    }
    echo "</tr></td>";
    $nbrtype = $inventaire['nbrtypeobj']+1;
    echo "<tr><td align='center'>Nombre d'objets au total : ".$inventaire['nombretotal']."</td><td align='center'>Nombres de différents objets : ".$nbrtype." </td></tr>";
    echo "<tr><td colspan=20>";
    ?>
     
     
    <script type="text/javascript">
    			document.write("<div id=\"description\">chargement ...</div>");
    </script>
     
    <?
    echo "</td></tr>";
    echo "</table>";
     
    ?>

    code de la page index2.php?page=etat&java=ON en fesant "code source de le page"

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    	<head>
           <title>Mana'adventure</title>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	   <link rel="stylesheet" media="screen" type="text/css" title="Mana1" href="design.css" />
     
    <script Language="JavaScript">
    var tab = new array();
     
    function RemplirTab() //a lancer au chargement de la page
    {
    	int id;
     
    	tab[1] ='Une arme très primitive mais qui néanmoins vous aidera.';tab[2] ='Un chapeau basic. Toujours mieux que rien.';tab[3] ='Une armure en cotton pour la douce saison, peu efficace en combat.';tab[5] ='Des boucles magiques.';tab[101] ='Objet qui redonne 100hp à votre héros.';tab[102] ='Objet qui redonne 300hp à votre héros.';tab[103] ='Objet qui réssucite votre héros.';	
    }
    function test()
    {
    	alert("test");
    }
     
    function AfficheTab(j) //a lancer a OnClick de l'image
    {
    		document.getElementById("description").innerHTML="<i>"+tab[j]+"</i>";
    		fokkk}
     
     
    </script>
     
     
    	</head>
     
    	<body onLoad='RemplirTab()'>
    		<div id="page">
    			<div id='menu_gauche'><div class ='groupefirst'><center><table width='115'><tr><td align=center colspan=2><b>Thief niveau 1</b><br><u>fabseven</u></td></tr><tr><td width='100' colspan='1'><img src='./images/barregreen.JPG' width='100' height='10' title='200 / 200'></td><td width='10'>HP</td></tr><tr><td width='100' colspan='1'><img src='./images/barreblue.JPG' width='100' height='10' title='25 / 25'></td><td>MP</td></tr> <tr><td width='100' colspan='1'><img src='./images/barreyellow.JPG' width='25' height='10' title='25 / 100'></td><td>AP</td></tr><tr><td width='100' colspan='1'><img src='./images/barregray.JPG' width='75' height='10' title='75 / 100'></td><td>XP</td></tr></table></center></div><div class ='groupefirst'><div class ='casefirst'>Actions héros</div><div class ='case'><a href=index2.php?page=etat>Etat</a></div><div class ='case'><a href=index2.php?page=invetaire>Inventaire</a></div><div class ='case'><a href=index2.php?page=carte>Carte</a></div></div></div>
     
     
    			<div id="corps">
     
    			<div><table id='mytablefiche' width='400' cellspacing='0' border='0'><tr id='tr_color' ><td colspan='4' align='center'>fabseven</td></tr> 
      <tr> 
        <td width="10%" rowspan="4" align="center"><img src=./images/jobs/thief.gif></td>
        <td width="25%" align="center"><u><b>Profession :</u></b></td>
        <td colspan="2" width="25%" align="center">Thief</td>
      </tr>
      <tr> 
        <td align="center"><u><b>Village Natal :</u></b></td>
     
        <td colspan="2" align="center">Hamo Potos</td>
      </tr>
      <tr> 
        <td align="center"><u><b>Position actuel:</u></b></td>
        <td colspan="2" align="center">15;15</td>
      </tr>
      <tr> 
        <td align="center"><u><b>Niveau actuel:</u></b></td>
     
        <td colspan="2" align="center">1</td>
      </tr>
     
    <tr><td colspan='4'><hr></td></tr><tr><td><b>Force :</b></td><td>3</td><td><b>Attaque :</b></td><td>ATK</td></tr><tr><td><b>Agilité :</b></td><td>6</td><td><b>Defense :</b></td><td>DEF</td></tr><tr><td><b>Vitalité :</b></td><td>3</td><td><b>Evasion :</b></td><td>EVA</td></tr><tr><td><b>Intelligence :</b></td><td>3</td><td><b>Def Magique :</b></td><td>MATK</td></tr><tr><td><b>Esprit :</b></td><td>3</td><td><b>Atk Magique :</b></td><td>MDEF</td></tr><tr><td><b>Chance :</b></td><td>6</td><td><b>Précision :</b></td><td>HIT</td></tr></table><table id='mytablequip' cellspacing='0' border='0'><tr id='tr_color'><td align='center' colspan='3'>Equipement</td></tr><tr><td id='padding'><u>Arme :</u>  <b></td><td align='center'><b>ATK+10</b></td><td align='center'> <img src=./images/armes/flintknife.gif title='Couteaux Silex'> </td></tr><tr><td id='padding'><u>Casque :</u>  <b></td><td align='center'><b>DEF+5</b></td><td align='center'> <img src=./images/armures/leatherhat.gif title='Chapeau de cuir
    '> </td></tr><tr><td id='padding'><u>Armure :</u>  <b></td><td align='center'><b>DEF+15</b></td><td align='center'> <img src=./images/armures/cottonkilt.gif title='Kilt de cotton'> </td></tr><tr><td id='padding'><u>Bouclier :</u>  <b></td><td align='center'><b>N/E</b></td><td align='center'><img src='./images/ne.gif' title='NON EQUIPE'> </td></tr><tr><td id='padding'><u>Acc1 :</u>  <b></td><td align='center'><b>DEF+2 MDEF+5</b></td><td align='center'> <img src=./images/armures/utsusemiearrings.gif title='Boucle Utsusemi'> </td></tr><tr><td id='padding'><u>Acc2 :</u>  </td><td align='center'><b>N/E</b></td><td align='center'> <img src='./images/ne.gif' title='NON EQUIPE'> </td></tr></table><br></div><br><table id='mytableinv' width='100%' cellspacing='0' border='1'><tr id='tr_color'><td align='center' colspan='100'>Inventaire</td></tr><tr><td colspan=50><img src=./images/objets/bonbon.gif title='Bonbon(x5)' OnClick='AfficheTab(101);'><img src=./images/objets/chocolat.gif title='Chocolat(x2)' OnClick='AfficheTab(102);'><img src=./images/objets/coupedevie.gif title='Coupe de vie(x4)' OnClick='AfficheTab(103);'></tr></td><tr><td align='center'>Nombre d'objets au total : 11</td><td align='center'>Nombres de différents objets : 3 </td></tr><tr><td colspan=20> 
     
     
    <script type="text/javascript">
    			document.write("<div id=\"description\">chargement ...</div>");
    </script>
     
    </td></tr></table>			</div>
     
     
    		</div>
    	</body>
     
    </html>

    Donc, on vois bien que la partie 1 a été correctement coder et exécuter vu que les cases du tableaux sont bien remplies ( il y a des cases 101,102 et 103 mais c'est normal ( id > 100 => objets utilisables ).
    Par contre, j'ai beau cliquer sur mes images, il ne se passe rien ...et on vois bien que le code
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <script type="text/javascript">
    			document.write("<div id=\"description\">chargement ...</div>");
    n'est pas ce qu'il devrais etre (normalement on devrais avoir une des descriptions du tableau une fois qu'on a cliquer sur l'une des images)
    On a tout simplement le code initial..

    Voila, si vous avez des questions...et surtout des réponses je vous écoute.

  2. #2
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Septembre 2006
    Messages
    38
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2006
    Messages : 38
    Points : 29
    Points
    29
    Par défaut
    j'ai finalement résolu le problème moi même donc je met en résolu (il s'aggisait de new Array et pas array comme en php...)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Fonction dans un evenement onclick sur une image
    Par SweetLeaf dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 29/07/2008, 11h23
  2. onclick avec une image sur ie6
    Par mLk92 dans le forum Général JavaScript
    Réponses: 13
    Dernier message: 22/04/2008, 17h20
  3. Réponses: 6
    Dernier message: 15/11/2007, 12h31
  4. Zoom sur une image
    Par AurelBUD dans le forum C++Builder
    Réponses: 5
    Dernier message: 07/05/2004, 17h05
  5. Comment mettre un label sur une image
    Par dug dans le forum MFC
    Réponses: 3
    Dernier message: 07/04/2004, 10h40

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo