Modification d'image dynamique en temps reel

Bonjours,

Je suis sur la création d'un générateur de signature pour les forum dynamiquement pour un jeu qui sortira prochainement.

Actuellement j'ai ma page avec mon php de création d'image basique et ma page html avec mon formulaire pour paramétrer l'image.

Or je veux avoir un aperçu de l'image qui ce modifie en temps réel sur la page de mon formulaire.

Je ne sais pas comment m'y prendre, je me suis tourné vers l'ajax mais je ne trouve que des exemples avec des fichiers xml etc... cepandant je penses plutot avoir besoin de modification de variable de mon php à la volé.

Voici l'exemple de ce que je veux : http://aion.yg.com/signatures

(Pour tester l'exemple, Server : Urtem - Player name : Ortiss)
Modifié par Ortiss (05 Dec 2011 - 18:04)

Bon je me suis débrouillé un peut seul, mais je bloque au niveau du rafraichissement de l'image via Ajax.

Dans la page de visualisation :
- Mon html (on clique sur les span pour changer la couleur du texte)

 <h1>Generateur de signature Tera Online</h1> 
                <div id="prev-sign">  
                <img src="signature/create-sign.php" alt="" />
                </div>
                <ul id="images">
                <li><span id="1">test 1</span></li>
                <li><span id="2">test 2</span></li>
                <li><span id="3">test 3</span></li>
                <li><span id="4">test 4</span></li>
                </ul>

- Mon JS

$(document).ready(function(){
	    $("#images li span").click(function(){
	        $.ajax({type:"POST", data: "fontcolor="+$(this).attr("id"), url:"signature/create-sign.php", cache:false,
	            success: function(data){
	                $("#prev-sign").html('<img src="signature/create-sign.php" alt="" />');
            },
	                        error: function(){
	                    $("#prev-sign").html('Une erreur est survenue.');
	            }
	        });
	    });
});

- Mon php qui génére l'image

header ("Content-type: image/jpeg");
$image = imagecreate(200,50);

$couleurpolice = $_GET['fontcolor'] ;

if ($couleurpolice == '1'){
$couleur = imagecolorallocate($image, 255, 128, 0);
} else if ($couleurpolice == '2'){
$couleur = imagecolorallocate($image, 0, 0, 255);
} else if ($couleurpolice == '3'){
$couleur = imagecolorallocate($image, 156, 227, 254);
} else if ($couleurpolice == '4'){
$couleur = imagecolorallocate($image, 0, 0, 0);
}

imagestring($image, 4, 35, 15, "Salut les Zéros !", $couleur);

imagejpeg($image);

Quand je clique sur les span rien ne change alors que si j’attribue une valeur directement à la variable, les couleurs changes.
Donc mon souci viens surement de ma façon de transmettre ou de récupérer l'id vers le php.

Merci

salut..

je répond directement à ta dernière phrase

tu utilise ajax en méthod POST... et tu récupère ta variable dans le php en ..... GET !

ouch la loose, faudra que j'ouve les yeux en codant la prochaine fois