Sources :

index.html

<script language="javascript" src="ajax.js" type="text/javascript"></script> <input type='button' value='Image 1' onclick='go(1)' /> <input type='button' value='Image 2' onclick='go(2)' /> <input type='button' value='Image 3' onclick='go(3)' /> <br/> <br/> <img id="image" src="images/ajax/reduit2.jpg" alt=""/> <br/> <br/> La Sélection peut aussi se faire par une liste : <select name='images' id='images' onchange='go2()'> <option value='1'>Image 1</option> <option value='2' selected="selected">Image 2</option> <option value='3'>Image 3</option> </select>

Ajax.php

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

Ajax.js

/* 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); }