Exemple de comment remplacer une image existante dans une page HTML en utilisant javascript:
Note: voir aussi How to add an image in a HTML page using javascript ?
Remplacer une image existante à l'aide de javscript
Considérons le dossier suivant avec une page HTML (appelée test.html ici) et deux images: (que l'on peut trouver ici eiffel-tower.jpeg et eiffel-tower-fliped-vertically.jpeg:
test.htmleiffel-tower-fliped-vertically.jpegeiffel-tower.jpeg
la page html montre l'image eiffel-tower-fliped-vertically.jpeg:
<!DOCTYPE html><html lang="en"><head><title>Test</title></head><body><img src="eiffel-tower-fliped-vertically.jpeg" style="height:700px"></body></html>
pour emplacer l'image eiffel-tower-fliped-vertically.jpeg par eiffel-tower.jpeg en utilisant du javascript:
<!DOCTYPE html><html lang="en"><head><title>Test</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></head><body><img id="my_image" src="eiffel-tower-fliped-vertically.jpeg" style="height:700px"><script>$("#my_image").attr("src","eiffel-tower.jpeg");</script></body></html>
Cliquez sur un lien pour remplacer une image en javascript
UN autre exemple
<!DOCTYPE html><html lang="en"><head><title>Test</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></head><body><img id="my_image" src="eiffel-tower-fliped-vertically.jpeg" style="height:700px"><a href='#' onClick="switch_image_function()">switch picture</a><script>function switch_image_function(image_url) {$("#my_image").attr("src","eiffel-tower.jpeg");}</script></body></html>
Ajouter un timestamp
Il est également possible d'ajouter un "timestamp" pour indiquer au "browser" que l'image a été mise à jour:
<!DOCTYPE html><html lang="en"><head><title>Test</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></head><body><img id="my_image" src="eiffel-tower-fliped-vertically.jpeg" style="height:700px"><a href='#' onClick="switch_image_function()">switch picture</a><script>function switch_image_function(image_url) {var timestamp = new Date().getTime();var queryString = "?t=" + timestamp;$("#my_image").attr("src","eiffel-tower.jpeg"+queryString)}</script></body></html>
