<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Chat</title>
<style>
body { max-width: 40em; }
#bouton { font-size: 20px; }
#chat {
position: absolute;
left: 0px;
top: 0px;
width: 200px;
animation-duration: 5s;
animation-name: chatbouge;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
@keyframes chatbouge {
from { left: 0px; }
to { left: 400px;}
}
</style>
</head>
<body>
<h1>Ceci est une page</h1>
<p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
<p><img id="chat" src="https://moodle.iutv.univ-paris13.fr/img/bjs2/chat.png"/></p>
<p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
<button id="bouton">Bouton</button>
<p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
<script>
document.getElementById('bouton').addEventListener('click',()=>{
console.log('click');
});
</script>
</body>
</html>