Sources :

index.html

<script src="/include/ajax.js"></script> <input type='button' value='Image 1' data-img="1" /> <input type='button' value='Image 2' data-img="2" /> <input type='button' value='Image 3' data-img="3" /> <br/> <img id="image" src="/images/ajax/reduit2.jpg" alt="" class="img-ajax"/> <br/> La sélection peut aussi se faire par une liste : <select name='images' id='images'> <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"]) && is_numeric($_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.1 26/12/2025 Par Radern / modernisation compat fetch */ /* 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 */ /**********************************************************************************************/ /* Etape 1 - Branchement des boutons (data-img) et du select sur les fonctions go() / go2() */ /* Déclenché automatiquement quand la page est prête */ document.addEventListener('DOMContentLoaded', function () { document.querySelectorAll('[data-img]').forEach(function (btn) { btn.addEventListener('click', function () { go(parseInt(this.dataset.img, 10)); }); }); document.getElementById('images').addEventListener('change', go2); }); /* Etape 2 - go(id_image) : appelée au clic d'un bouton, lance l'envoi Ajax */ function go(id_image) { sendAjax(id_image); document.getElementById('images').selectedIndex = id_image - 1; } /* Etape 3 - go2() : appelée quand la liste change, récupère la valeur et lance l'envoi Ajax */ function go2() { var sel = document.getElementById('images'); sendAjax(sel.options[sel.selectedIndex].value); } /* Etape 4 - sendAjax() : envoie idImage en POST, récupère le chemin de l'image, l'affiche */ function sendAjax(id_image) { fetch('/include/ajax.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'idImage=' + encodeURIComponent(id_image) }).then(function (resp) { return resp.text(); }) .then(function (url) { document.getElementById('image').src = url; }); }