4: Miam - saison 1 : La rencontre

Dans les pages suivantes, on va retrouver notre petit chat tout mignon.

Créez les images suivantes (attention elles sont un peu différentes que celles utilisées avant):

herbe.jpg

chat2.svg


Créez le fichier miam.html suivant:

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Miam</title>
		<script src="https://moodle.iutv.univ-paris13.fr/img/bjs2/bjs2-js-lib.js"></script>
                <link rel="stylesheet" href="miam.css"/>
	</head>
	<body>
		<div id="terrain">
			<img id="chat" src="chat2.svg"/>
		</div>
		<script src="miam.js"></script>
	</body>
</html>

miam.js

// Vide pour l'instant

miam.css

#terrain {
	position: relative;
	width: 800px;
	height: 800px;
	background-image: url(herbe.jpg);
}
#chat {
	position: absolute;
	top: 0px;
	left: 0px;
	transition: top 1s, left 1s;
}