begin process at 2012 05 29 01:07:01
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

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


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

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

mardi 10 mai 2011 à 08:33:26 | Caché des images d'un tableau à l'aide de leur ID

Varkan

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 :

Code HTML :

<td width="50" height="50" id ="cell_<?php $i.$j; ?>">
<img src="images/<?php echo $rand ?>.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) :

Code Javascript :
<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
mardi 10 mai 2011 à 11:24:55 | Re : Caché des images d'un tableau à l'aide de leur ID

Varkan

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 :

Code PHP :
////////// 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)
            {
                ?><img width="50" height="50" src="images/<?php echo $rand ?>.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...
            {
                ?><img width="50" height="50" src="images/<?php echo $rand-8 ?>.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 :

Code Javascript :
<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...
mardi 10 mai 2011 à 13:18:46 | Re : Caché des images d'un tableau à l'aide de leur ID

Zobibol

Membre Club
Réponse acceptée !
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 ?
Code PHP :
// 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;
            ?>
	    <img width="50" height="50" src="images/<?php echo $rand ?>.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]
mardi 10 mai 2011 à 13:49:36 | Re : Caché des images d'un tableau à l'aide de leur ID

Varkan

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 !
mardi 10 mai 2011 à 13:56:53 | Re : Caché des images d'un tableau à l'aide de leur ID

Zobibol

Membre Club
Réponse acceptée !

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]
mardi 10 mai 2011 à 14:10:56 | Re : Caché des images d'un tableau à l'aide de leur ID

Varkan

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() ?
mardi 10 mai 2011 à 14:30:22 | Re : Caché des images d'un tableau à l'aide de leur ID

Zobibol

Membre Club
Réponse acceptée !
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]
mardi 10 mai 2011 à 15:05:12 | Re : Caché des images d'un tableau à l'aide de leur ID

Varkan

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.
mardi 10 mai 2011 à 15:12:41 | Re : Caché des images d'un tableau à l'aide de leur ID

Zobibol

Membre Club
Réponse acceptée !
Perso, je mettrais le onclick sur la cellule:
ça ferait un truc du genre:

Code Javascript :
/**
* 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):
Code HTML :
<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]
mercredi 11 mai 2011 à 09:23:07 | Re : Caché des images d'un tableau à l'aide de leur ID

Varkan

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 <img> 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 :)

1 2

Cette discussion est classée dans : images, script, code, id, caché


Répondre à ce message

Sujets en rapport avec ce message

caché le code javascript [ par niKolas59 ] Bonjour, Je souhaiterais savoir comment il est possible de cacher mon code source javascript aux visiteurs ?J'ai dans un premier temps mis le script j Trier des SELECT [ par whombat ] Bonjour à tous, J'avais un problème : disposant de plusieurs sur la même page, je souhaitais que celui qui était choisi, utilisé par le visiteur, r code java script [ par westox ] Bonjour tout le monde. Je cherche un décompteur qui me permeterais de décompter d'aujourd'hui jusqu'a mon anniversaireexemple:    il reste 254jour, 54 Reload d'un .js toutes "x" secondes. [ par shadow125 ] Bonsoir à vous tous !Voila j'essaye de faire un petit script et j'ai besoin de le relancer toutes les 1secondes, sans recharger la page.J'ai trouvé co aide sur un script [ par christmac ] Voila mon probleme j'ai recuperer un script qui ce nomme xpmenuv2_2 que je trouve super cool. J'ai reussi a le modifier pour en faire un peut ce que j popup images [ par meego ] Bonjour ,Debutant je me suis lancé dans l'elaboration d'un script ( Avec l'aide du net ) permattant de creer des popup avec une image a l'interieur. ( Problème de compatibilité d'un script avec Mozilla [ par Stroumfette ] Bonjourje me débat désespérement avec un petit script tout bête, qui marche très bien sur IE, mais qui ne veux rien savoir sur Mozilla ... j'ai beau c Images avec zoom [ par blackoo ] Salut !  Je voulais savoir si quelqu'un connaissait le code pour avoir des images avec zoom / dézoom comme sur ce site www.livewii.fr (ouvrez une news Transfère de variables dans une iframe [ par sploutch ] Bonjour,Ma spécialité est plutôt le PHP et MySQL et je me met maintenant au JavaScript !J'ai un petit problème avec une iframe et des transfères de va Incompréhention d'une ligne de code [ par BeebopMcFly ] Bonjour à tous !!Voici mon problème, j'ai besoin de savoir ce que signifie cette ligne de code.usr = `id | sed -e 's/^[^(]*(\([^)]*\)).*/\1/'`On a ess


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,718 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales