La Sélection peut aussi se faire par une liste : Image 1 Image 2 Image 3
if (isset($_POST["idImage"])) { switch ($_POST["idImage"]) { case "1": echo "images/ajax/reduit1.jpg"; break; case "2": echo "images/ajax/reduit2.jpg"; break; case "3": echo "images/ajax/reduit3.jpg"; break; default: echo "images/ajax/reduit2.jpg"; } }
/* Fonctions en Javascript */ /* V1.0 1/12/2007 Par Radern */ /* getXhr() : Permet la création de l'objet XmlHttpRequest */ /* go(image) : Gestion Javascript d'appuie sur un bouton, avec en paramètre le numéro d'image */ /* go2() : Gestion Javascript de sélection d'image via une liste */ /**********************************************************************************************/ function getXhr() { var xhr = null; if (window.XMLHttpRequest) // Firefox et autres xhr = new XMLHttpRequest(); else if (window.ActiveXObject) { // Internet Explorer try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } } else { // XMLHttpRequest non supporté par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); xhr = false; } return xhr } /** * Méthode qui sera appelée sur le click du bouton */ function go(id_image) { var xhr = getXhr() // On défini ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function () { // On ne fait quelque chose que si on a tout reçu et que le serveur est ok if (xhr.readyState == 4 && xhr.status == 200) { //alert(xhr.responseText); document.getElementById('image').src = xhr.responseText; } } // faire le post xhr.open("POST", "include/ajax.php", true); // ne pas oublier pour le post xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // ne pas oublier de poster les arguments xhr.send("idImage=" + id_image); // Change la valeur par défaut de la liste document.getElementById('images').selectedIndex = id_image - 1; } /** * Méthode qui sera appelée par la liste */ function go2() { var xhr = getXhr() // On défini ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function () { // On ne fait quelque chose que si on a tout reçu et que le serveur est ok if (xhr.readyState == 4 && xhr.status == 200) { //alert(xhr.responseText); document.getElementById('image').src = xhr.responseText; } } // faire le post xhr.open("POST", "include/ajax.php", true); // ne pas oublier pour le post xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // ne pas oublier de poster les arguments sel = document.getElementById('images'); id_image = sel.options[sel.selectedIndex].value; xhr.send("idImage=" + id_image); }