Source de tp4ter.html
1: <!DOCTYPE html>
2: <html lang="fr">
3: <head>
4: <title>Actions utilisateur et JavaScript</title>
5: <meta charset="utf-8" />
6: <link rel="stylesheet" href="idemm.css" />
7: <script>
8: var position = 1;
9: var nb_images = 4;
10: function descend () {
11: var idchat = 'img'+position;
12: position = position + 1;
13: if (position>nb_images) {
14: position = 1;
15: }
16: var idsuiv = 'img'+position;
17: document.getElementById(idchat).src = document.getElementById(idsuiv).src;
18: document.getElementById(idsuiv).src = 'images/chat.jpg';
19: }
20: function monte () {
21: var idchat = 'img'+position;
22: position = position - 1;
23: if (position<1) {
24: position = nb_images;
25: }
26: var idprec = 'img'+position;
27: document.getElementById(idchat).src = document.getElementById(idprec).src;
28: document.getElementById(idprec).src = 'images/chat.jpg';
29: }
30: </script>
31: </head>
32:
33: <body onkeyup="if (event.key=='ArrowDown') {descend();} else { if (event.key=='ArrowUp') {monte();} }">
34:
35: <h1>Actions utilisateur et JavaScript</h1>
36:
37: <h2>Déplacement d'images</h2>
38:
39: <div class="illustration">
40: <img id="img1" src="images/chat.jpg" width="100" /><br />
41: <img id="img2" src="images/chien.jpg" width="100" /><br />
42: <img id="img3" src="images/sanglier.jpg" width="100" /><br />
43: <img id="img4" src="images/lapin.jpg" width="100" /><br />
44: </div>
45:
46: <button onclick="monte();">^en haut ^</button>
47: <button onclick="descend();">v en bas v</button>
48:
49: </body>
50: </html>
51: