+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : comment faire cela avec le JS? (/showthread.php?tid=1703)
comment faire cela avec le JS? - Argorate - 02-09-2007
bonjour, j'ai besoin de vos idées, j'aimerais savoir si vous savez comment faire !?
j'ai un tableau remplit de plusieur images differentes. (Tableau #1)
Puis au dessous j'ai une image d'affiché dans une case d'un autre tableau (tableau #2).
Ce qu'il me faut c'est que quand je clique sur une image de mon Tableau #1, et qu'ensuite je clique sur l'unique case de mon second Tableau #2, cela remplace l'image du Tableau #2 par celle qui se trouve dans la case où j'ai cliqué dans le tableau #1.
Oui dit comme ça c'est pas tres clair, c'est pas evidant a expliqué, esseyez de relire
Si vous reussissez a comprendre et trouver la solution, je vous ecoute!
RE: comment faire cela avec le JS? - Haiken - 02-09-2007
tu interceptes l'évènement onlick pour chaque image du tableau 1 afin d'affecter le nom de l'image associée à une variable globale
tu interceptes l'évènement onclik de l'image du tableau 2 afin d'affecter à sa source (attribut src) ta variable globale
RE: comment faire cela avec le JS? - Sephi-Chan - 02-09-2007
Donc en gros, tu veux intervertir deux images que tu sélectionne l'une après l'autre ?
Si c'est bien de ça qu'il s'agit, tu peux créer une fonction qui se lancerai au click sur la première image :
- Récupère l'attribut src de cette première image sélectionnée (par un clic) et stocke cet attribut dans une variable srcImg1.
- Si on clique de nouveaux, elle teste si la variable srcImg1 existe : si oui, cela signifie que la fonction attend un clic sur une deuxième image. On récupère alors l'attribut src de l'image qui vient d'être cliquée et on le stocke dans srcImg2
- On remplace l'attribut src de la deuxième image cliquée par le contenu de la variable srcImg1.
- On remplace l'attribut src de la première image cliquée par le contenu de la variable srcImg2.
Sephi-Chan
RE: comment faire cela avec le JS? - Argorate - 02-09-2007
Merci, j'ai reussi, c'était la syntaxe que je connaissé pas, c'était pas si compliqué
RE: [regle]comment faire cela avec le JS? - HammHetfield - 03-09-2007
sinon tu aurais pu le faire en php, juste a créer une table avec l'url de l'image qui va dans le tableau 1 et celle qui va dans le tableau 2 et l'id, ensuite tu affiches toutes les images dans le tableau un, et elle fait un lien vers la page actuelle en transmettant son id, et quand la page se relance, tu recuperes l'id et tu affiches l'url de l'image correspondante dans le tableau 2!
Juste du php tout bete ^^
RE: [regle]comment faire cela avec le JS? - Argorate - 03-09-2007
Me revoila, eheh, quand on croit que ça marche, on se rend compte que si on veux ameliorai sa marche plus!
bonjour, voila mon pb:
j'ai le JS suivant:
Citation :<script language="javascript">et le code html suivant:
function recupvalue(valeur)
{
document.getElementById("tester").value=valeur;
}
function clik()
{
document.imageterraint.src='images/terrain/t'+document.getElementById("tester").value+'.gif';
}
</script>
Citation :<form>La manoeuvre se fait en deux temps:
<input type="text" size="2" value="0" id="tester">
</form>
<br>
<table border="1" cellpadding="0" cellspacing="0" style="font-size:1px">
<tr>
<td value="1" onClick="recupvalue(this.value);">
<img src="images/terrain/t1.gif">
</td>
<td value="2" onClick="recupvalue(this.value);">
<img src="images/terrain/t2.gif">
</td>
</tr>
</table>
<br>
<table border="1" cellpadding="0" cellspacing="0" style="font-size:1px">
<tr>
<td style="width:50px; height:50px; font-size:1px" onClick="clik();"><img src="images/vide.gif" name="imageterrain"></td>
<td style="width:50px; height:50px; font-size:1px" onClick="clik();"><img src="images/vide.gif" name="imageterrain"></td>
</tr>
</table>
on clique dans une des deux cases du premier tableau, est avec le JS c'est cencé changer la valeur de l'imput par celle de la case où on a cliqué
Premier pb: cela marche avec IE et maxthon mais evidament pas avec FF -_-'
Une fois la veleur de l'imput changé, il faut que quand on clique sur une des 2 cases du 2e tableau, l'image se transforme avec celle corespondante.
Mon gros pb se citue là! j'ai plusieurs <img> qui on le meme "name="imageterrain"" donc le script marche quand il y a une image, mais quand y en a 2 ou plus cela marche plus, je ne sais pas comment faire pour diferencié les deux images.
je sais pas si tout ça est clair, toute aide sera la bienvenue...
RE: comment faire cela avec le JS? - Haiken - 03-09-2007
- Dans le onClick, il me semble que this désigne un objet Event, et non pas l'objet qui a déclenché l'évènement. Donc soit tu récupères l'objet en question à partir de la variable globale event (qui désigne l'élément), soit tu places direcement la constante dans l'appel de ta fonction recupvalue
- tu peux différencier les 2 images dans l'appel de clik() en passant le nom de l'attribut Id qui doit être unique.
En passant : document.imageterraint.src ne correspond pas avec name="imageterrain"
RE: comment faire cela avec le JS? - Roworll - 03-09-2007
Alors, dans l'ordre
Code PHP :
<?php
<td value="1" onClick="recupvalue(this.value);">
Le problème est que IE permet l'utilisation du .value pour récupérer la valeur de l'attribut value.
Dans une syntaxe correcte Javascript, le .value ne fonctionne que sur les éléments d'une form.
Dans ton cas, tu dois utiliser
Code PHP :
<?php
<td value="1" onClick="recupvalue(this.getAttribute('value'));">
Validé sous IE, FF et Opéra.
Maintenant, pour la 2e partie de ton code, celui qui remplace l'image, je te conseille plutôt de faire un truc du genre
Code PHP :
<?php
<td style="width:50px; height:50px; font-size:1px"><img src="images/vide.gif" onClick="clik(this);"></td>
<td style="width:50px; height:50px; font-size:1px"><img src="images/vide.gif" onClick="clik(this);" ></td>
Code PHP :
<?php
function clik(img){
img.src='images/t'+document.getElementById("tester").value+'.gif';
}
Attention aux raccourcis permis par IE et consorts. Ils sont bien spécifiques à ce navigateur et ne sont pas reconnus par le W3C.
RE: comment faire cela avec le JS? - Argorate - 03-09-2007
EDIT: Tout baigne, ça marche impec, merci! vais pouvoir mamusé a faire ma map
Surtout avec 1 200 000 cases! XD
Maintenant la question est: comment recupéré la valeur "document.getElementById("tester").value" dans chaque case une fois que j'aurais mis celle qui me plait, pour ensuite l'enregistré dans une base de donnée sql?