Transfert de variable

[Gabriel]

Bonjour,
pour mon système de création d'avatar lors de l'inscription j'ai un petit problème.

J'affiche les toutes les possibilité d'images pour la bouche / les cheveux / yeux / etc

Lorsque le joueur clique sur l'une d'elle, un avatar sur le côté qui montre le résultat est automatiquement mis à jour avec l'image voulue.

Je fais donc ça en JS avec un onClick sur chaque image.
Mais je n'arrive pas à faire en sorte que l'avatar sur le côté soit MAJ...

Voici mon code

Code :

<div id = "base" style="position:absolute; top:300px; left:800px;  z-index:1; ">
<img src = "images/avatar/base.png">
</div>

<div id = "paupiere2" style="position:absolute; top:300px; left:800px;  z-index:2; ">
<img src = "images/avatar/eye/defaut.png" id="paupiere">
</div>

<div id = "bouche" style="position:absolute; top:300px; left:800px;  z-index:3; ">
<img src = "images/avatar/mouth/defaut.png">
</div>

<div id = "acc" style="position:absolute; top:300px; left:800px;  z-index:4; ">
<img src = "images/avatar/other/defaut.png">
</div>

<div id = "cheveux" style="position:absolute; top:300px; left:800px;  z-index:5; ">
<img src = "images/avatar/bhair1/defaut.png">
</div>

<script type="text/javascript">


function change_paupiere( var i)
{
    
    var image = document.getElementById('paupiere');
    var fichier = 'images/avatar/eye/';
    var type = '.png';
    
    image.src = "fichier+i+type";

    }

}

</script>

<fieldset>
<legend>Yeux</legend>

<img src="images/avatar/eye/1.png" onclick="change_paupiere(1)">
<img src="images/avatar/eye/2.png" onclick="change_paupiere(2)">
<img src="images/avatar/eye/3.png" onclick="change_paupiere(3)">
<img src="images/avatar/eye/4.png" onclick="change_paupiere(4)">
<img src="images/avatar/eye/5.png" onclick="change_paupiere(5)">
<img src="images/avatar/eye/6.png" onclick="change_paupiere(6)">
<img src="images/avatar/eye/7.png" onclick="change_paupiere(7)">

Je précise que je suis un parfait débutant en JS et que les 4 pauvres lignes que j'ai réussi à écrire vienne d'un assemblage de copier/coller donc ça ne m'étonne qu'a moitié que ça ne marche pas ^^

J'ai quand même essayé plusieurs possibilités et fait des recherches avant de poster ici mais.... ça ne marche pas

Je m'en remet donc à vous pour m'aider !
Merci d'avance !

[Maz]

Pourquoi ne pas simplement faire:

Code :

<img src="images/avatar/eye/7.png" onclick="change_paupiere(this)">
function change_paupiere(paupiereClique)
{
    
    var image = document.getElementById('paupiere');
    var nouvellePaupiere = paupiereClique.src;
    image.src = nouvellePaupiere;
}

}

[Gabriel]

Merci, ça fonctionne !

Pourquoi ne pas simplement faire:

Reponse :

Je précise que je suis un parfait débutant en JS et que les 4 pauvres lignes que j'ai réussi à écrire vienne d'un assemblage de copier/coller donc ça ne m'étonne qu'a moitié que ça ne marche pas

^^


Par contre, comment pourrais je récupérer le n° de l'image pour le rentrer dans un BDD ?
Je sais que certains me diront que PHP est un langage serveur et que le JS est un langage client.
Mais il doit bien y avoir un moyen ?

[Anthor]

Tu créés des input en hidden, et tu leur passe la valeur, comme pour l'image.

[Gabriel]

Effectivement ça marche !

Merci beaucoup a vous 2 !
Je marque comme résolu