Caché des images d'un tableau à l'aide de leur IDRésolu

Question

Bonjour, Je fais actuellement un mini-jeu de Memory en php mysql. Pour mon problème j'ai besoin d'un mini script qui me permet de retourné mes cartes. Donc je met mes images dans chaque cellules avec un ID qui lui est propre et qui est ajouter via 2 variables php, $i pour la colonne et $j pour la ligne : .png" id ="img_" border="0"/> Ensuite j'incère ce petit script qui me permettra de cacher mes cartes via l'ID (si j'ai bien compris) : Et je n'arrive pas à faire fonctionner ce script... Merci d'avance pour vos futurs réponses

Zobibol · Accepted Answer

bonjour, le souhait est de caché les images directement ? si oui, pourquoi ne pas utiliser le css ? se serait beaucoup plus simple. de plus j'ai légèrement optimiser le if ($rand) que je trouve fort laid ;o) ceci ne conviendrait-il point ? // Test le niveau, si = à facile : Initialise un tableau en php en 4x4 if ($_SESSION["niveau"] == "facile") { $j = 1; //Ligne while($j <= 4) { ?> .png" style="visibility:hidden;" id ="img_" border="0" onClick="Click();"/>

Varkan · Answer

J'ai réussie à en cacher 1 seul... mais j'ai mit mes ID en dur, voici le résultat en image : Maintenant, mes ID sont des variables php et je les incrémente au même moment que je construit mon tableau html : ////////// Niveau Facile////////// // Test le niveau, si = à facile : Initialise un tableau en php en 4x4 if ($_SESSION["niveau"] == "facile") { $j = 1; //Ligne while($j <= 4) { ?> .png" id ="img_" border="0" onClick="Click();"/>.png" id ="img_" border="0" onClick="Click();"/> Bah ça ne marche plus car j'utilise des variable PHP (je pense que le problème vient de là) Je n'arrive pas a trouver un moyen d'incrémenter les ID en créant le tableau html et en mettant les images à l'intérieur et de les cacher par la suite.... J'ai vraiment besoin d'aide, j'ai chercher sur le forum et je n'arrive pas a trouver une solution...

Varkan · Answer

Salut, merci d'avoir répondu, tu n'imagines même pas comment je suis soulagé !

Donc oui, je voudrais les cacher au chargement de la page. Si je le fais dans mon CSS, est-ce que je pourrais le modifier via du js ??

Car pour la suite, une fois que les images seront cachées, je devrai faire une fonction click() en js afin de les retourner et les comparer, donc modifier le CSS...

Sinon pour le if, je ne connaissais pas cette syntaxe oO Le "?" peut-on le considérer comme un "else" ?

C'est plus propre en tout cas !

Zobibol · Answer

Sinon pour le if, je ne connaissais pas cette syntaxe oO Le "?" peut-on le considérer comme un "else" ? 
c'est une expression ternaire, ça ne facilite pas forcément la lecture (donc il ne faut pas en abuser) mais ça simplifie dans certains cas l'écriture.

Ensuite dans la méthode click() je présume qu'il y a un if (mavariable.style.visibility=="hidden") (je présume n'ayant point les sources)
donc, il y a aura une lecture du style et normalement tout sera comme voulu. En faisant:
document.getElementById(xxx).style.visibility="hidden" cela revient à style="visibility:hidden" sur la balise.

Je ne sais pas trop si j'ai été clair.

[o-_-o]

Varkan · Answer

Pour le moment, la fonction click() est juste dans ma tête, et j'aurai, je pense, pas mal de difficulté à la faire, m'enfin pour le moment je dois cacher mes images. Mais oui effectivement, il y aura un mavariable.style.visibility=="hidden.

Donc effectivement, j'ai mit en balise et tout marche ! Je ne savais pas qu'on pouvait le faire comme ça :



Merci beaucoup !

Avec cette solution, je peux retourner mes images via une fonction click() ?

Zobibol · Answer

voilà enfin, on s'attaque au javascript 
heu, je viens juste d'avoir une idée de génie, le onclick n'est pas intercepté sur un contrôle dont la visibilité est hidden...

il va falloir trouver une autre méthode !




[o-_-o]

Varkan · Answer

Dans ce cas on revient au début de mon post si ça ne marche pas.

Je peux faire un onclick sur mon image ou ma cellule qui appelle une fonction Cacher()

Et là je met le getElementById("img_XX").style.visibility = "hidden"

Mais il faut alors trouver comment passé des variables php au js... je crois que c'est pas faisable vu que le js est un langage client et que le php serveur.

Zobibol · Answer

Perso, je mettrais le onclick sur la cellule: ça ferait un truc du genre: /** * Méthode appelée sur clique d'une balise td * @param _cell * Cellule sur laquelle on a cliqué (this) */ function onClick(_cell){ // récupère le premier fils image de la cellule. var _firstChildImg = _cell.getElementsByTagName("img")[0]; // si elle est cachée on la montre if (_firstChildImg.style.visibility=="hidden"){ _firstChildImg.style.visibility="visible"; // et la je fais mon traitement qui va bien... }else{ // sinon, l'image est déjà cliqué, l'utilisateur n'est pas une flèche ;o) alert ("hey banane, t'as déjà cliqué sur cette image..."); } } et enfin d'un point de vue html (puisque c'est plus du html que du php): // en transmettant this à la méthode, on est dans l'objet en cours (c'est bien foutu le javascript), du coup moins de soucis pour retrouver ces petits. [o-_-o]

Varkan · Answer

Re-salut !

J'ai pas pu te répondre plus vite, j'ai pas mal de petit imprévus.

Alors j'ai testé et c'est exactement ce que je recherchais !

J'ai analysé ton code histoire de le comprendre, mais je ne comprend pas le "getElementsByTagName("img")[0];".

ma balise  n'a pas de name et là tu as mit ("img")[0] et tout marche à merveille.

En fait dans quelques semaines, des experts vont venir me questionner sur mon projet, me demander les sources d'aide etc. Et j'aimerais bien m'informer sur cette partie du code.

Maintenant je vais essayé de trouver une solution pour vérifier si c'est la première image que je retourne ou la deuxième afin des les comparer (pour sa je pense que je doit mettre en mémoire les 2 cartes que je retourne) puis voir si c'est les même ou pas.

En tout cas merci pour ton aide Zobibol :)

Zobibol · Answer

Bien le bonjour, le forum est la pour aidé et si je peux j'aide
la fonction getElementsByTagName retourne un élément en fonction de son tag (name) donc, ici, il y a une recherche tous les éléments qui ont pour tag img donc tous les éléments: 
Comme je ne suis pas un grand pédagogue, le mieux est ce site : http://fr.selfhtml.org/
tu y trouveras pas mal d'explication plus mieux bien expliquée .
pour ce qui est de la suite de tes traitements si tu as besoin d'aide, le forum sera la.

Bon faudrait quand même que je pense à travailler un peu 

A+


[o-_-o]

Varkan · Answer

Ah ok j'ai compris :)

Bon là j'ai essayé quelques truc pour récupérer l'id de la cellule quand je clique sur l'image pour la retourner mais rien de marche.

Je voulais utiliser le getElementsByID mais je n'y arrive pas.

Varkan · Answer

Bon j'ai réussi a trouver une solution :


    function foo(_elem)
    {
        var _ligne = _elem.parentNode.rowIndex;
        var _colonne = _elem.cellIndex;
        alert(_ligne +"."+_colonne);
    }

    function init()
    {
        _cellules=document.getElementsByTagName('td')
        var i=-1;
        while (cellules[++i])
        {
            _cellules[i].onclick=function(){foo(this)}
        }
    }


Ceci me permet de récupérer les coordonnées de mon image.

Maintenant je ne vois pas comment faire pour comparer les deux images retournées pour savoir si celle-ci sont semblable...

Varkan · Answer

les coordonnées de ma cellule pardon, et non de mon image.

smathis · Answer

Dans le src de ta balise image tu stockes le numéro de l'image, si c'est le même numéro c'est gagné.
Et tu peux récupérer le contenu d'un attribut (src en l'occurence) avec ça :
valeur = mon_image.getAttribute("src")
Tu auras l'adresse de l'image, si c'est la même, c'est les mêmes cartes.
Le problème c'est que si on regarde le code source de la page, on verra chaque image, avec le numero et on pourra tricher

Varkan · Answer

Ok, mais valeur correspond à une variable js ?

et mon_image au chemin de l'image ? Si oui un problème surviendra car j'ai ceci :

.png" id ="img_<?php $i.$j; ?>" border="0" onClick="returnimg();"/>

Et mon chemin contient une variable php

smathis · Answer

Tu affiches une image, dans le code html tu auras 

Pour la case de position (2,3).
valeur serait ta chaine de caractère correspondant au contenu de src, soit images/5.png.
Tu fais ça pour les deux et t'auras par exemple images/5.png et images/1.png, tu compares ces deux trucs, vu que c'est différent, ce sont des images différente.

Varkan · Answer

Ah ok je vois mieux maintenant et mon_image serait un paramètre que je passe dans la fonction ?

ce qui me donnerais :


    function coord(_elem, _img)
    {
        var _ligne = _elem.parentNode.rowIndex;
        var _colonne = _elem.cellIndex;

        var _test = _img.getAttribute("src");

        if (_coord1 != "")
        {
            var _coord2 = _ligne +"."+_colonne;
            alert(_coord2);
        }
        else
        {
            var _coord1 = _ligne +"."+_colonne;
            alert(_coord1);
        }
    }


Pour les if, c'est juste des testes en débugge pour récupérer 2 coordonnées. Mais ça ne marche pas...

Si mon var _test est juste, comment je fais pour l'afficher en alert ? afin de voir à quoi il correspond, car je n'y arrive pas, mais c'est sûrement dû à une erreur.

smathis · Answer

Pas besoin de passer l'image en paramètre. Si tu as les coordonnées (si ça marche pas, passe les en paramètres à la place du reste) tu peux récupérer la référence de l'image. Car l'id de l'image est toujours de cette forme id ="img_xy", et justement tu as x y.
Donc tu peux faire : 
var test = document.getElementById('img_'+x+y).getAttribute("src");
Parce que à mon avis ton alerte ne marche pas car _img ne fait pas référence à l'objet.

Caché des images d'un tableau à l'aide de leur ID

18 réponses

Votre réponse

Discussions similaires