Comment changer une image via un bouton HTML ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-05-31 11:58:30

Question

Comment faire pour changer une image lorsqu'on clique sur un bouton HTML ?

Réponse

Pour changer une image lorsqu'on clique sur un bouton HTML, vous pouvez utiliser la propriété JavaScript src.

Il suffit d'identifier la balise image, avec un ID par exemple. puis de modifier sa valeur src.

Dans l'exemple ci-dessous on crée un fonction JavaScript qui est exécutée lorsqu'on clique sur un bouton.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment changer une image via un bouton HTML ?</title>
</head>  
<body>
<img src="https://www.collaborativejob.com/os.jpg" alt="image" id="monImage">
<br>
<button onclick="changerImage();">Changer l'image</button>
<script>
function changerImage(){
document.getElementById('monImage').src="https://www.collaborativejob.com/images/pub/memoire-vive.jpg";
}
</script>
</body>
</html>