Caché des images d'un tableau à l'aide de leur ID [Résolu]

Signaler
Messages postés
27
Date d'inscription
mardi 9 juin 2009
Statut
Membre
Dernière intervention
17 mai 2011
-
Messages postés
153
Date d'inscription
lundi 22 mars 2010
Statut
Membre
Dernière intervention
17 juin 2011
-
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 :


<td width="50" height="50" id ="cell_<?php $i.$j; ?>">
.png" id ="img_<?php $i.$j; ?>" border="0"/></td>



Ensuite j'incère ce petit script qui me permettra de cacher mes cartes via l'ID (si j'ai bien compris) :

<script type="text/javascript">
document.getElementById("img_<?php echo $i.$j; ?>").style.visibility = "hidden" ;
</script>


Et je n'arrive pas à faire fonctionner ce script...

Merci d'avance pour vos futurs réponses

18 réponses

Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
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)
    {
        ?>
        <tr>
        <?php
        $i = 1; //Colonne
        while($i <= 4)
        {
            $rand = rand(1, 16); // génére un nombre aléatoire
            $inctab = 1; // Variable qui incrémente la dimenssions
            while($inctab <=4)
            {
                if (in_array($rand, $_SESSION["tblidc"][$inctab])) // Test si la var $rand existe déjà dans la dimensions[$inctab]
                {
                    $rand = rand(1, 16); // génére un nouveau nombre aléatoire
                    $inctab = 1; // remettre le tab a 1 pour refaire une vérif.
                }
                else
                {
                   $inctab++;
                }
            }

            // Test si la valeur de rand est plus grand que 8

            ?><td width="50" height="50" id ="cell_<?php $i.$j; ?>" >
    <?php
$rand = ($rand <= 8) ? $rand: $rand-8;
            ?>
    .png" style="visibility:hidden;" id ="img_<?php $i.$j; ?>" border="0" onClick="Click();"/></td>
            <?php
            $_SESSION["tblidc"][$j][$i] = $rand; // Permet de mettre un chiffre aléa. pour chaque case, exemple en 1.1, 1.2, etc. à l'aide des var $j et $i.
            $i++;
        }
        ?>
        </tr>
        <?php
        $j++;
    }
} 


[o-_-o]
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
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]
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
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]
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
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):
<td width="50" height="50" id ="cell_<?php $i.$j; ?>"  onClick="onClick(this)">

// 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]
Messages postés
27
Date d'inscription
mardi 9 juin 2009
Statut
Membre
Dernière intervention
17 mai 2011

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)
    {
        ?>
        <tr>
        <?php
        $i = 1; //Colonne
        while($i <= 4)
        {
            $rand = rand(1, 16); // génére un nombre aléatoire
            $inctab = 1; // Variable qui incrémente la dimenssions
            while($inctab <=4)
            {
                if (in_array($rand, $_SESSION["tblidc"][$inctab])) // Test si la var $rand existe déjà dans la dimensions[$inctab]
                {
                    $rand = rand(1, 16); // génére un nouveau nombre aléatoire
                    $inctab = 1; // remettre le tab a 1 pour refaire une vérif.
                }
                else
                {
                   $inctab++;
                }
            }

            // Test si la valeur de rand est plus grand que 8

            ?><td width="50" height="50" id ="cell_<?php $i.$j; ?>" ><?php
            if ($rand <= 8)
            {
                ?>.png" id ="img_<?php $i.$j; ?>" border="0" onClick="Click();"/><?php
            }
            else //Si le rand est plus grand que 8, on enlève 8 a celui-ci ce qui nous donne 9-8 1, 10-8 2, 11-8=3, etc...
            {
                ?>.png" id ="img_<?php $i.$j; ?>" border="0" onClick="Click();"/><?php
            }?></td>
            <?php
            $_SESSION["tblidc"][$j][$i] = $rand; // Permet de mettre un chiffre aléa. pour chaque case, exemple en 1.1, 1.2, etc. à l'aide des var $j et $i.
            $i++;
        }
        ?>
        </tr>
        <?php
        $j++;
    }
} 


Et si j'utilise toujours le même script :

<script language="javascript" type="text/javascript">
<!--
document.getElementById("img_<?php "$i".$j; ?>").style.visibility = "hidden" ;
//-->
</script>


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...
Messages postés
27
Date d'inscription
mardi 9 juin 2009
Statut
Membre
Dernière intervention
17 mai 2011

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 !
Messages postés
27
Date d'inscription
mardi 9 juin 2009
Statut
Membre
Dernière intervention
17 mai 2011

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() ?
Messages postés
27
Date d'inscription
mardi 9 juin 2009
Statut
Membre
Dernière intervention
17 mai 2011

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.
Messages postés
27
Date d'inscription
mardi 9 juin 2009
Statut
Membre
Dernière intervention
17 mai 2011

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 :)
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
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]
Messages postés
27
Date d'inscription
mardi 9 juin 2009
Statut
Membre
Dernière intervention
17 mai 2011

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.
Messages postés
27
Date d'inscription
mardi 9 juin 2009
Statut
Membre
Dernière intervention
17 mai 2011

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...
Messages postés
27
Date d'inscription
mardi 9 juin 2009
Statut
Membre
Dernière intervention
17 mai 2011

les coordonnées de ma cellule pardon, et non de mon image.
Messages postés
153
Date d'inscription
lundi 22 mars 2010
Statut
Membre
Dernière intervention
17 juin 2011
2
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
Messages postés
27
Date d'inscription
mardi 9 juin 2009
Statut
Membre
Dernière intervention
17 mai 2011

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
Messages postés
153
Date d'inscription
lundi 22 mars 2010
Statut
Membre
Dernière intervention
17 juin 2011
2
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.
Messages postés
27
Date d'inscription
mardi 9 juin 2009
Statut
Membre
Dernière intervention
17 mai 2011

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.
Messages postés
153
Date d'inscription
lundi 22 mars 2010
Statut
Membre
Dernière intervention
17 juin 2011
2
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.