Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1476 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Javascript / Ajax - Remplacer une image par une autre

 



 Mot :   Pseudo :  
 
 Page :   1  2
Page Précédente
Auteur Sujet :

Javascript / Ajax - Remplacer une image par une autre

n°2016252
ingeniomat​ique
Posté le 12-08-2010 à 08:57:19  profilanswer
 

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

mood
Publicité
Posté le 12-08-2010 à 08:57:19  profilanswer
 

n°2016258
abais
Posté le 12-08-2010 à 09:33:36  profilanswer
 

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

 

Avec JQuery :

 

En JS :

Code :
  1. $(document).ready(function() {
  2.       
  3.    $("#monImage" ).click(function(){
  4.         
  5.     $.ajax({
  6.         url: 'monFichierPhp.php',
  7.         success: function(data) {
  8.             $(this).attr('src', data);
  9.         }
  10.     });
  11.  
  12.    });
  13. });


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

Code :
  1. <?php
  2.  
  3. // ici tu mets ta verif BDD
  4. //...
  5.  
  6. if()//si la verif BDD est ok
  7. {
  8.  echo 'image2.png';
  9. }
  10. else
  11. {
  12.  echo 'error.png'; // par exemple
  13. }
  14. ?>


Message édité par abais le 12-08-2010 à 09:35:03

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2016263
ingeniomat​ique
Posté le 12-08-2010 à 09:48:51  profilanswer
 

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 !!!

n°2016271
abais
Posté le 12-08-2010 à 10:10:57  profilanswer
 

ingeniomatique a écrit :

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) [:moundir]  
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" :

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


 
 


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2016272
ingeniomat​ique
Posté le 12-08-2010 à 10:13:40  profilanswer
 

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

n°2016277
abais
Posté le 12-08-2010 à 10:26:18  profilanswer
 

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...


Message édité par abais le 12-08-2010 à 10:30:58

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2016288
ingeniomat​ique
Posté le 12-08-2010 à 10:52:17  profilanswer
 

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...

n°2016326
gelatine_v​elue
Posté le 12-08-2010 à 11:37:51  profilanswer
 

ingeniomatique a écrit :

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
 

n°2016357
ingeniomat​ique
Posté le 12-08-2010 à 12:55:36  profilanswer
 

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.


Message édité par ingeniomatique le 12-08-2010 à 13:51:51
n°2016377
abais
Posté le 12-08-2010 à 13:38:01  profilanswer
 

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)"


Message édité par abais le 12-08-2010 à 13:43:36

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
mood
Publicité
Posté le 12-08-2010 à 13:38:01  profilanswer
 

n°2016380
ingeniomat​ique
Posté le 12-08-2010 à 13:51:14  profilanswer
 

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...

n°2016382
ingeniomat​ique
Posté le 12-08-2010 à 13:52:09  profilanswer
 

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

n°2016391
abais
Posté le 12-08-2010 à 14:06:27  profilanswer
 

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)


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2016393
abais
Posté le 12-08-2010 à 14:09:58  profilanswer
 

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


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2016410
ingeniomat​ique
Posté le 12-08-2010 à 14:20:18  profilanswer
 

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.

n°2016420
gelatine_v​elue
Posté le 12-08-2010 à 14:30:18  profilanswer
 

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.


Message édité par gelatine_velue le 12-08-2010 à 14:31:37
n°2016437
abais
Posté le 12-08-2010 à 14:44:47  profilanswer
 

tout à fait  :jap:


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2016478
ingeniomat​ique
Posté le 12-08-2010 à 15:31:28  profilanswer
 

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...

n°2016495
gelatine_v​elue
Posté le 12-08-2010 à 15:43:05  profilanswer
 

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.

n°2016496
ingeniomat​ique
Posté le 12-08-2010 à 15:46:31  profilanswer
 

Ca marche j'attends ce soir pour "agir" :)

n°2016560
ingeniomat​ique
Posté le 12-08-2010 à 19:16:11  profilanswer
 

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 !!

n°2016566
gelatine_v​elue
Posté le 12-08-2010 à 19:42:03  profilanswer
 

ingeniomatique a écrit :

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.

n°2016567
ingeniomat​ique
Posté le 12-08-2010 à 19:45:40  profilanswer
 

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 !!

n°2016569
gelatine_v​elue
Posté le 12-08-2010 à 19:59:39  profilanswer
 


 
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


Message édité par gelatine_velue le 12-08-2010 à 20:51:39
n°2016580
ingeniomat​ique
Posté le 12-08-2010 à 20:49:57  profilanswer
 

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.

n°2016581
gelatine_v​elue
Posté le 12-08-2010 à 20:52:41  profilanswer
 

ingeniomatique a écrit :

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 :o.

 


Voila la partie intéressante du code:

 
Code :
  1. <style type="text/css">
  2. body {
  3. background-color: #ECECFF;
  4. }
  5. .violet {
  6. color: #609;
  7. }
  8. .bleu {
  9. color: #036;
  10. }
  11. #conteneurTableau
  12. {
  13. background-color:#55BBCC;
  14. position:absolute;
  15. width:800px;
  16. height:650px;
  17. margin:auto;
  18. z-index=0;
  19. }
  20. #imgGrille
  21. {
  22. position:absolute;
  23. z-index=2;
  24. }
  25. img.piece
  26. {
  27. height:64px;
  28. width:64px;
  29. position:absolute;
  30. z-index=1;
  31. }
  32. </style>
  33. <script src="jeup4.php_files/jquery-1.js" type="text/javascript"></script>
  34. <script type="text/javascript">
  35. largeurCase = 64;
  36. hauteurCase = 64;
  37. debutTabX = 180;
  38. debutTabY = 180;
  39. coinNb=1;
  40. $(function(){
  41.      
  42. $("#conteneurTableau" )[0].style.zIndex="0";
  43. $("#imgGrille" )[0].style.zIndex="2";
  44.     $("#conteneurTableau img#imgGrille" ).click(function(e){
  45.        
  46.     var x = e.pageX - this.offsetLeft;
  47. var y = e.pageY - this.offsetTop;
  48.        if ((x>debutTabX  && y>debutTabX ) && (x<(largeurCase  *7 +debutTabX) && y<(hauteurCase *6+debutTabY )))
  49. {
  50.  //calcul de la case
  51.  var caseX = Math.ceil((x-debutTabX)/largeurCase) -1;
  52.  var caseY = Math.ceil((y-debutTabY)/hauteurCase) -1;
  53.  //Creéation de la nouvelle image à placer
  54.  $("#conteneurTableau" ).append("<img id='piece"+coinNb+"' class='piece' src='coin.jpg'/>" );
  55.  $("#piece"+coinNb)[0].style.top = (largeurCase  * caseY +debutTabY)+"px"
  56.  $("#piece"+coinNb)[0].style.left = (hauteurCase *caseX +debutTabX )+"px"
  57.  coinNb++;
  58. }
  59.     });
  60. });
  61. </script>
  62. </head>
  63. <body>
  64. <div id="conteneurTableau">
  65.    <img id="imgGrille" src="jeup4.php_files/44-4.png" alt="" style="" width="800" height="650" border="0">
  66. </div> 
  67. </body>
  68. </html>
 


Tu remarqueras la disparition du tableau html.


Message édité par gelatine_velue le 12-08-2010 à 21:01:13
n°2016675
ingeniomat​ique
Posté le 13-08-2010 à 11:22:44  profilanswer
 

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 :p
 
En tout cas un grand merci !!! Vraiment bien.

n°2016733
ingeniomat​ique
Posté le 13-08-2010 à 15:03:22  profilanswer
 

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...

n°2016758
gelatine_v​elue
Posté le 13-08-2010 à 15:58:30  profilanswer
 

ingeniomatique a écrit :

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.

n°2016794
abais
Posté le 13-08-2010 à 17:32:00  profilanswer
 

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


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2016804
ingeniomat​ique
Posté le 13-08-2010 à 17:56:36  profilanswer
 

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 ?

n°2016810
abais
Posté le 13-08-2010 à 18:40:31  profilanswer
 

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" );


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2016821
ingeniomat​ique
Posté le 13-08-2010 à 19:15:33  profilanswer
 

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 ?...

n°2016827
ingeniomat​ique
Posté le 13-08-2010 à 19:38:44  profilanswer
 

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

n°2016844
ingeniomat​ique
Posté le 13-08-2010 à 22:17:34  profilanswer
 

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>

n°2016846
gelatine_v​elue
Posté le 13-08-2010 à 22:34:29  profilanswer
 

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...

n°2016856
abais
Posté le 13-08-2010 à 23:56:31  profilanswer
 

ingeniomatique a écrit :

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>


<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>


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2016892
ingeniomat​ique
Posté le 14-08-2010 à 09:29:59  profilanswer
 

# 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.


Message édité par ingeniomatique le 14-08-2010 à 09:30:46
n°2017095
ingeniomat​ique
Posté le 16-08-2010 à 10:30:41  profilanswer
 

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 :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Document sans nom</title>
  6. <script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
  7. <script type="text/javascript">
  8. $(function(){ 
  9.        
  10.     $("#conteneur img" ).click(function(){ 
  11.          
  12.     function() {   
  13.             $(this).attr('src', 'Images/Jeux/p41.png');
  14.         }     
  15.  
  16.     }); 
  17. }); 
  18. </script>
  19. </head>
  20. <body>
  21. <table id="conteneur">
  22. <tr><td><img src='Images/Boutique/010.png'></td></tr></table>
  23. </body>
  24. </html>


 
Merci par avance de votre aide !

n°2017107
gelatine_v​elue
Posté le 16-08-2010 à 11:03:28  profilanswer
 

ingeniomatique a écrit :

Je me permets une petite relance...  
 
Merci par avance de votre aide !


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

Code :
  1. $(function(){
  2. 3
  3. 4 $("#conteneur img" ).click(function(){
  4. 5
  5. 6
  6. 7 $(this).attr('src', 'Images/Jeux/p41.png');
  7. 8
  8. 9
  9. 10 });
  10. 11});


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

mood
Publicité
Posté le   profilanswer
 

 Page :   1  2
Page Précédente

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Javascript / Ajax - Remplacer une image par une autre

 

Sujets relatifs
Menu CSS sans javascriptremplacer l'url dans <a href="adresse.html" par une variable
Question de débutant en AjaxPetit souci : Switch javascript -> "default" ne fonctionne pas....
Image au-dessus d'un tableauRemplacer caractères héxa : PERL
[SWT] Afficher image en plein ecranCréer un widget : iframe + javascript, comment fait on ?
[javascript] action en appuyant sur la touche enterVidéo youtube sur image
Plus de sujets relatifs à : Javascript / Ajax - Remplacer une image par une autre


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR