Accueil > Forum > > > > Caché des images d'un tableau à l'aide de leur ID
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
|
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
|
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
|
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
|
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 :)
|
|
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
Livres en rapport
|
Derniers Blogs
IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVESSHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg
Dernièrement, nous avons migré le site
myTIC
vers un nouveau serveur SharePoint 2010. Dans les contenus que nous vouloins récupérer, nous avions un certain nombre de blogs.
Nous avons utilisé les commandes Power...
Cliquez pour lire la suite de l'article par junarnoalg
Forum
UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
Logiciels
sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|