Comment remplacer une image existante dans une page HTML en utilisant javascript ?

Active 24 février 2021    /    Viewed 668    /    Comments 0    /    Edit


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.html
eiffel-tower-fliped-vertically.jpeg
eiffel-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>

Comment remplacer une image existante dans une page HTML en utilisant javascript ?

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>

Comment remplacer une image existante dans une page HTML en utilisant javascript ?

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>

Comment remplacer une image existante dans une page HTML en utilisant javascript ?

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>

Références


Card image cap
profile-image
Daidalos

Hi, I am Ben.

I have developed this web site from scratch with Django to share with everyone my notes. If you have any ideas or suggestions to improve the site, let me know ! (you can contact me using the form in the welcome page). Thanks!