Bonjour à tous,
 
Admettons que j'aie une image <img src='image1.png'> qui s'affiche.
Par un script JAVASCRIPT associé à de l'AJAX (appel à ma base de données, PHP...) je souhaiterais que par l'action de mon utilisateur (clic sur cette image => vérification de la BDD) cette image soit remplacée par <img src='image2.png'>.
 
Merci par avance de votre aide.
 
Antoine

Tu peux utiliser une librairie JS pour te simplifier la tâche (crossbrowser etc..)...
Donne aussi un id à ton image...

Avec JQuery :

En JS :

$(document).ready(function() {
       
    $("#monImage" ).click(function(){
        
    $.ajax({
        url: 'monFichierPhp.php',
        success: function(data) {
            $(this).attr('src', data);
        }
    });
 
    });
});

et dans ton php (ici "monFichierPhp.php" ) :

<?php
 
// ici tu mets ta verif BDD
//...
 
if()//si la verif BDD est ok
{
  echo 'image2.png';
}
else
{
  echo 'error.png'; // par exemple
}
?>

Merci pour une réponse si rapide et précise c'était inespéré !!!
 
Quelques questions :
* Le simple fait de donner à une image id=monImage va automatiquement être reconnu sur #monImage ?
* L'affichage de l'image (fichier PHP) va-t-il automatiquement REMPLACER la première image (et donc supprimer la 1ere) ?
* J'ai bien JQUERY sur mon serveur. Est-ce suffisant ? Qu'est-ce que CROSSBROWSER ?
 
* Question subsidiaire : Est-ce possible de charger un script javascript (puis ajax, php... = même principe) automatiquement pour un utilisateur toutes les 3 secondes ?
 
 
Merci encore !!!

1) id='monImage' (avec les guillemets)  
Et oui, le Jquery "selectionne" comme le CSS, à savoir # pour un id, et un . pour une class...
 
2) le Php ne fait que retourner un texte, ici "image2.png" ou "error.png"...
C'est Le JS qui associe ce retour (data) à l'attribue "src" de ton <img>
Et oui, le fait de donner une valeur à un attribue remplace celle qui existait (si il en existait une)
 
3)Il faut aussi que tu charge JQuery dans ton HTML (indique le chemin)
=> <script type="text/javascript" src="jquery.js"></script>
 
4)Oui, il y a une fonction pour ça, le "setInterval" :

var monInterval = setInterval(maFontion, 3000); // le temps est en milliseconde
// Ici, la fontion "maFontion" sera exécutée toute les 3 seconde.
 
// Et si tu veux arreter l'execution de l'interval :
clearInterval(monInterval);

Réponse royale.
 
Tout est clair.
Je teste tout cela dès que possible.
 
Merci encore.

J'oubliais, le CrossBrowser c'est le fait que ton script soit compatible sur tous (la majorité en tout cas) les navigateur (firefox, internet explorer...)...
Ici, c'est JQuery qui "s'occupe" de "traduire" notre code en fonction du nav...
Ne vas pas non plus croire que la différence est extreme entre les nav, mais en Ajax, Internet Explorer (anciennes versions) a une autre approche...
Perso, je choisi la simplicité, les librairies sont la pour ça...

En fait je viens de tester et j'ai besoin d'une légère adaptation.
 
J'ai 42 images cliquables sur mon plateau.
Chacune, si on clique dessus, doit faire appel à la fonction.
 
Les ID des images vont de A1 à F7.
 
Comment adapter le script pour reconnaître les ID à chaque fois ?
 
 
$(document).ready(function() {
       
    $("#monImage" ).click(function(){
         
    $.ajax({
        url: 'monFichierPhp.php',
        success: function(data) {
            $(this).attr('src', data);
        }
    });
 
    });
});
 
 
Merci encore...

 
Tes images doivent bien être dans un conteneur quelconque. Supposons que tes images soient dans un <div id="conteneurImages">.
Tu feras quelque chose comme $("#conteneurImages > img" ).click...
 
En gros il devrait te suffire de changer  $("#monImage" ) par $("#conteneurImages  > img" ). je te laisse t'inspirer de ça: http://docs.jquery.com/DOM/Traversing/Selectors
 

Alors je viens de tester :
 
Mes 42 images sont dans un tableau (TABLE) sur j'ai appelé id="conteneur".
Chaque image est affichée de cette manière : <td width="60" height="66"><img src="Images/Jeux/p41.png" width="60" height="63" id="C7"></td>
 
Mon script devient celui là :
 
 
<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function() {
       
    $("#conteneur  > img" ).click(function(){
         
    $.ajax({
        url: 'jeup4verif.php',
        success: function(data) {
            $(this).attr('src', data);
        }
    });
 
    });
});
</script>
 
 
 
Et le fichier PHP est volontairement simple pour tester :
 

<?php
 
 $nb=rand(0,1);
if($nb==1)
{
  echo 'Images/Jeux/p41.png';
}
else
{
  echo 'Images/Jeux/p42.png';
}
?>
 
 
Pourtant, en cliquant sur une image au hasard, rien ne se passe...
 
Merci SINCEREMENT de votre aide.

Edit ton message, ta mis le code du JS au lieu du PHP...
 
 
Remplace :
 
$.ajax({  
        url: 'jeup4verif.php',  
        success: function(data) {  
            $(this).attr('src', data);  
        }  
    });
 
Par :
 
        alert("j'ai cliqué sur une image !" );
 
Et dis nous si ça marche...
 
EDIT :
 
A non je sais, le ">" du selecteur n'est pas approprier, c'est pour selectionner les element contenu directement...
or, entre ta table et tes image, il y a une arborescence de tr/td....
 
Donc, enlève le, ça donne $("#conteneur img" ) => "tous les <img> dont #conteneur est un ancetre(parent pas forcément direct)"

J'ai donc :
 
<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function() {
       
    $("#conteneur img" ).click(function(){
         
    alert("j'ai cliqué sur une image !" );  
 
    });
});
</script>
 
Avec comme tableau :
 
<table width="200" border="0" cellpadding="2" cellspacing="2" style='display:block; position:absolute; top:10; left:10; width: 1000; font-family: Verdana, Geneva, sans-serif; font-size: 12px;' id="conteneur">
Succession de TR/TD avec une image dans chaque TD
</table>
 
Et en cliquant sur une image il n'y a pas l'alerte...

( Je viens également d'éditer le script PHP simple ci-dessus )

La je seche, tu es sure que JQuery est bien chargé ?
Tu peux le mettre online pour qu'on puisse voir ?
Remplace <script language="javascript"> par <script type="text/javascript"> aussi (meme si c'est pas ça qui merde)

Essaye sinon en remplaçant $(document).ready(function(){  par $(function(){
(ça n'attendra pas que ton DOM soit prêt)

Voila les deux éléments sont changés.
 
L'adresse online est : http://www.tromph.com/jeup4.php
Confidentiel car site pas encore lancé.
 
C'est un puissance 4.
 
Cliquer sur une case entraîne un script PHP qui change la couleur de la case (image PNG) si nécessaire.
 
Pour le moment cela ne fonctionne toujours pas.

C'est normal. L'image de la grille chargée tout en bas de ton code s'affiche par dessus tes images de cases, ce qui fait que l'événement click n'est pas propagé. Le fait que l'image soit transparente ne change rien.

Une soluce simple consisterai à afficher des images rondes de "trous" par _dessus_ l'image de la grille.

edit: je viens de tester en enlevant l'image de la grille et ça marche bien, c'est donc bien ça.

tout à fait  

Il faut donc que je me débrouille pour obtenir des ronds de couleurs, aux bords transparents, exactement de la bonne dimension ; que je les cale exactement aux trous du plateau de jeu ; que j'inverse l'ordre tableau/image ; et que je retente...
Dès que j'en suis là je reviens vers vous pour vous confirmer que tout marche, avec le lien avec le script PHP
Un grand merci en tout cas.
En tout cas merci beaucoup...

Nan nan attend c'est pas la seule solution hein, j'essaierai de te faire part d'autres soluces ce soir, là pas trop le temps.

Ca marche j'attends ce soir pour "agir"

En attendant je me suis quand même créé les images en "rond" pour placer  le tableau AU-DESSUS de l'image pour que le script puisse fonctionner...
Mais comment faire pour inverser (placer le tableau au dessus) ?
Merci par avance !!

 
 
Salut,
 
Alors j'ai réfléchi à ton problème et je pense que la solution la meilleure (celle que je ferais), est la suivante:
 

• Définir un fond uni en html, qui eput se changer facilement (pour la maintenabilité)
• Mettre ton image par dessus
• Définir une grille virtuelle en javascript qui se base sur l'image de la grille et qui "sait" a quelle case correspond un clic
• faire apparaitre une image derrière la grille à l'endroit du clic.

Je vais essayer de coder ça puor te donner une idée.

C'est vraiment très gentil de me coder un exemple, oui, top !!
Peux-tu répondre à ma question ne serait-ce que par curiosité (concernant le changement d'ordre entre le tableau et l'image) ?
Merci !!

 
Lien de Téléchargement du zip. A dézipper et à ouvrir avec firefox (ie n'aime pas comment FFx a enregistré les fichiers et j'ai la flemme de les reprendre 1 a 1): http://dl.free.fr/mYyhPPXPh

En effet ça marche
Mais comme tu peux le constater (www.tromph.com/jeup4.php) le rendu est bien moins bon que ce que tu proposes en codage.

Tu as sur le message au dessus ce que j'ai codé.
Mon exmple a un positionnement approximatif et des couleurs dégueu, mais bon hein, c'est du détail .

Voila la partie intéressante du code:

Tu remarqueras la disparition du tableau html.

Hello
Désolé du retard de réponse mais étant très loin de chez moi et sur un wifi public pourri, ceci explique cela...
Je viens de tester sur http://www.tromph.com/p4/jeup4.php et cela semble fonctionner impec !!!
Il me reste en effet à tout aligner, mettre de belles images... et surtout coder tout le PHP qu'il y a derrière
 
En tout cas un grand merci !!! Vraiment bien.

Alors je viens de regarder en détails et j'avoue ne pas être très à l'aise avec tout ça car c'est bien au delà de mon niveau actuel... :$
 
 
Plusieurs questions :
 
* Où puis-je insérer mon appel à fichier PHP du style :
 
$.ajax({  
        url: 'jeup4verif.php',  
        success: function(data) {  
            $(this).attr('src', data);  
        }  
    });  
 
afin de vérifier certains points avant de procéder au changement d'image ?
 
* Sur le fichier PHP il faut que je puisse identifier chaque case par un id. Comment se matérialisent-ils dans ton script ? Auparavant j'avais de A1 à F7 (soit 42 ID différents).
 
Avec ces quelques indications je comprendrai mieux et pourrai adapter je pense...

 
Ton premier point est bizarre: tu appelles jeu4verif.php qui est à priori une page web et tu veux le mettre dans un attribut src d'une balise... Dis moi plutot ce que tu essaies de faire je pourrai mieux t'aider.
 
Dans mon script chaque pièce de monnaie à un id mais il ne représente pas sa position dans la grille. Il n'y a pas d'id par case, mais un tableau unique de cases virtuelles, c'est à dire non matérialisées par du code html.

Il a repris de mon exemple, où le php retourne une url d'image, tout simplement...

En fait mon souhait est d'ajouter un id par case.
Chaque clic sur une case appelle un script PHP (qui appelle ma BDD...) qui définit si OUI ou NON on change la couleur de la case concernée, et de quelle couleur.
 
Comment pourrais je procéder ?

Tu peux communiquer des variables à ton PHP en ajax, soit en GET (directement sur l'url du php), soit en POST (regarde la docs de Jquery)
 
Pour recupérer l'id de l'objet cliqué en JS : var monId = $(this).attr("id" );

Oui le POST et le GET aucun souci.
 
Par contre, quand je récupère l'objet de l'id cliqué, comment savoir de quelle case il s'agit et utiliser cette donnée ?...

En fait je viens de reprendre la proposition d'Abais.
 
Voir www.tromph.com/jeup4.php
Mon image est bien calée cette fois-ci donc l'affichage va bien
 
Cependant....
 
 
<script type="text/javascript">
$(function(){
       
    $("#conteneur img" ).click(function(){
         
    alert("j'ai cliqué sur une image !" );  
 
    });
});
</script>
 
=> En cliquant, cela fonctionne, aucun souci !!
L'alerte s'affiche.
 
 
Mais ce que je souhaite...
 
<script type="text/javascript">
$(function(){
       
    $("#conteneur img" ).click(function(){
         
    $.ajax({  
        url: 'jeup4verif.php',  
        success: function(data) {  
            $(this).attr('src', data);  
        }  
    });  
 
    });
});
</script>
 
Avec jeup4verif.php :
 
<?php
 
 $nb=rand(0,1);
if($nb==1)
{
  echo 'Images/Jeux/p41.png';
}
else
{
  echo 'Images/Jeux/p42.png';
}
?>
 
=> Aucune réaction ! Le clic ne modifie pas l'image...
Avez vous une idée de la cause ?
 
Encore merci

J'ajoute que même sans faire appel à un fichier externe le remplacement d'image ne fonctionne pas.
 
Par exemple :
 
<script type="text/javascript">
$(function(){
       
    $("#conteneur img" ).click(function(){
         
    function(data) {  
            $(this).attr('Images/Jeux/p41.png', data);  
        }    
 
    });
});
</script>

Si tu veux reprendre mon exemple il te sufit de passer au script php non pas un id unique mais les coordonnées de la case (variables caseX et caseY).
 
Pour ce qui est de ton pb j'ai cherché là et j'ai pas la moindre idée de pourquoi els callbacks sont pas appelés... Je dirais d'essayer avec une autre version de jquery, ptetre un bu dans celle ci...

<script type="text/javascript">
$(function(){
       
    $("#conteneur img" ).click(function(){
         
    function(data) {  
            $(this).attr('Images/Jeux/p41.png', data);  
            $(this).attr('src', 'Images/Jeux/p41.png'); // attr('nom de l'attribut', 'valeur souhaité')
        }    
 
    });
});
</script>

# Même en effectuant ce correctif, et même en modifiant la valeur de JQUERY cela ne fonctionne pas (voir www.tromph.com/jeup4.php).
 
<script src="p4/jeup4.php_files/jquery-1.js" type="text/javascript"></script>
<script type="text/javascript">  
$(function(){  
         
    $("#conteneur img" ).click(function(){  
         
    function(data) {    
            $(this).attr('src', 'Images/Jeux/p41.png');
        }      
   
    });  
});  
</script>  
 
=> Aucun effet. Je suppose que c'est lié au tableau (conteneur) et images, façon de les appeler... Mais il y a forcément une solution :s
 
 
# Gelatine_value sur ton exemple (que je maîtrise moins bien, car très "pro", je t'embaûcherais volontiers lol), je comprends qu'on peut utiliser les coordonnées à la place des ID.
Cependant, où placer mes vérifications PHP, appels à BDD, avant d'afficher la seconde image, et choisir quelle seconde image à afficher ?
 
Bon WE à tous.

Je me permets une petite relance... J'ai tout torturé ce week end de mon côté et je n'ai rien trouvé.
 
J'ai même tenté de simplifier la page sans que ça marche davantage :
 

 
Merci par avance de votre aide !

 
 
J'ai pris le code de ta page et remplacé le code js par ceci:
 

 
Et là ça marche.
Autrement dit, tu avais mis une fonction dans une fonction.