Utiliser les touches up et down en remplacement de la roulette lorsqu'il n'y a pas de souris

Bonjour
Dans le script suivant, je fais dérouler des images avec la roulette de la souris.
J'aimerai ajouter la possibilité de faire défiler les images à l'aide des touches up et down du clavier.
Je trouve bien la fonction function KeyPress sur le net, mais je n'arrive pas a la combiner avec onmousewheel event.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
<!DOCTYPE html>
<!-- saved from url=(0075)file:///C:/Users/Philippe/Desktop/METEO/Meteo%20Consorzio%20Lamma%20HR.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Meteo Consorzio Lamma HR</title>
<link rel="shortcut icon" type="image/x-icon" href="file:///C:/Users/Philippe/Desktop/METEO/images/favicon.ico">
     <style type="text/css">
 
body{
    font-family: verdana ;
    font-size:13px
}
div#1 {
 	position:static; margin-top: 0; margin-bottom: 0
}        
div#selection {
	margin-left: 160px; margin-top: 0; margin-bottom: 0
}
div#conteneur {
    float: left;
    width: 800px;
    height: 580px;
    background: white;
    padding-right: 1px;
    padding-top: 6px;
}
div#time {
    float: left;
    padding-top: 10px;
    padding-left: 0px;
}
.onoffswitch {
    float: left; width: 120px; margin-top: 0; margin-bottom: 0
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border-radius: 2px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 24px; padding: 0; line-height: 26px;
    font-family:'Helvetica Neue',Arial,sans-serif;
	font-size:16px;
 
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "HORS LIGNE";
text-align: center;
    background-color: #FF0000; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "EN LIGNE";
 
    background-color: #4285F4; color: #FFFFFF;
    text-align: center;
}
.onoffswitch-switch {
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}
#progressBarb{
 
    height: 2px;
 
	background-color: #2300FF;	
	text-align: right;
 
}
#progressBar{
 
height: 2px;
background-color: #CACACA;
width: 100%;	
}
div#indic {
float : right;
padding-right: 3px;
 
}
</style>
 
    <script type="text/javascript" language="Javascript">
 
function initInputonload() {
 
    var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"
 
    if (document.body.attachEvent)
          document.body.attachEvent("on" + mousewheelevt, rotateimage);
        else if (document.body.addEventListener)
                 document.body.addEventListener(mousewheelevt, rotateimage, false);
 
    conteneur.innerHTML = "";
    initInput();
 
}
function raz() {
 	document.getElementById("pourcentage").innerHTML = "" ;
	document.getElementById("progressBarb").style.width = 0 + "%";
	document.getElementById("progressBarb").innerHTML = "";
	document.getElementById("nombre").innerHTML = "" ;
}  
 
 
function initInput() {
 
    var url = document.getElementById("affichage").value ;       
    var type = document.getElementById("type").value;
    var region = document.getElementById("region").value;    
 
    var n = url.lastIndexOf("/"); 
    url = url.slice(0,n+1) + type + region + "_web_*.png";
    document.getElementById("affichage").value = url;
 }
 
function afficheImages() {
 
 
    if(document.getElementById("offline").checked) {
 
        afficheImagesHorsConnexion();
        return;        
    }
 
    var url = document.getElementById("affichage").value;
 
    if (url.indexOf("*") === -1) {
 
      document.getElementById("msg").innerHTML = "L'url doit contenir le caractère '*' ! ";
      return;
    }
 
    var nbrBegin = +document.getElementById("nbrBegin").value;
    var nbrEnd = +document.getElementById("nbrEnd").value; 
    var monImg ;  
    var conteneur = document.getElementById("conteneur");
 
    conteneur.innerHTML = "";
 	nbrImagesLoaded = 0 ;
 
	document.getElementById("pourcentage").innerHTML = "" ;
	document.getElementById("progressBarb").style.width = 0 + "%"; 
    for (var i= nbrBegin; i<= nbrEnd; i++) {
 
        monImg = document.createElement('img');     
        monImg.src = url.replace("*", i);
        monImg.style.visibility = 'hidden' ;
        monImg.style.position = "absolute";
        monImg.id = "image " + i ;		
		monImg.onload = funcLoadImage ;
        conteneur.appendChild(monImg);           
    }
 
    document.images[0].style.visibility = "visible";    
 
}
 
 
 
function afficheImagesHorsConnexion() {
 
    var url = document.getElementById("affichage").value;    
    var n = url.lastIndexOf("/");          
    var pathImages = "./" + document.title + "_files" + url.slice(n);    
 
    var nbrBegin = +document.getElementById("nbrBegin").value;
    var nbrEnd = +document.getElementById("nbrEnd").value; 
    var monImg ;  
    var conteneur = document.getElementById("conteneur");
 
    conteneur.innerHTML = "";
 
    for (var i= nbrBegin; i<= nbrEnd; i++) {
 
        monImg = document.createElement('img');     
        monImg.src = pathImages.replace("*", i);
        monImg.style.visibility = 'hidden' ;
        monImg.style.position = "absolute";        
        conteneur.appendChild(monImg);           
    }
 
    document.images[0].style.visibility = "visible";
 
}
var nbrImagesLoaded = 0 ;
 
 
function funcLoadImage() {
 
	var pourcentage = 100 * (nbrImagesLoaded+1)/document.getElementById("nbrEnd").value ;
	var nbrEnd = +document.getElementById("nbrEnd").value;
 
 
	document.getElementById("pourcentage").innerHTML = " " + (nbrImagesLoaded+1);	
	document.getElementById("progressBarb").style.width = pourcentage + "%";	
	document.getElementById("nombre").innerHTML = "/" + nbrEnd + " images";
 
	nbrImagesLoaded++;
}  
 
var myimages = document.images;
var currentImage = 0 ;
var nextImage = 0 ;
 
function rotateimage(e) {
 
    if(myimages.length === 0) return ;
 
    var evt = window.event || e     //equalize event object
    var delta = evt.detail ? evt.detail * (-120) : evt.wheelDelta     //delta returns +120 when wheel is scrolled up, -120 when scrolled down
    nextImage = (delta <= -120) ? nextImage + 1 : nextImage - 1 //move image index forward or back, depending on whether wheel is scrolled down or up    
 
    nextImage = (nextImage < 0) ? 0 : (nextImage > myimages.length - 1) ? myimages.length - 1 : nextImage
 
 
    myimages[currentImage].style.visibility = "hidden";    
    myimages[nextImage].style.visibility = "visible";
    currentImage = nextImage ;
 
    if (evt.preventDefault)
        //disable default wheel action of scrolling page
        evt.preventDefault()
    else
        return false ;
 
}
function heure () {
var Maintenant = new Date();
var heures = Maintenant.getUTCHours();
var minutes = Maintenant.getUTCMinutes();
var secondes = Maintenant.getUTCSeconds();
var jour=new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
var date = Maintenant.getUTCDate();
var mois = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
var année = Maintenant.getUTCFullYear();
heures = ((heures < 10) ? " 0" : " ") + heures;
minutes = ((minutes < 10) ? ":0" : ":") + minutes;
secondes = ((secondes < 10) ? ":0" : ":") + secondes;
document.getElementById("horloge").value = jour[Maintenant.getUTCDay()] + ", " + date +" "+ mois[Maintenant.getUTCMonth()]+" "+année+"  - "+ heures + minutes + secondes + " UTC";
setTimeout("heure()",1000);
}
 
 
function heureL () {
var Local = new Date();
var heuresL = Local.getHours();
var minutesL = Local.getMinutes();
var secondesL = Local.getSeconds();
var jourF = new Array("Dim","Lun","Mar","Mer","Jeu","Ven","Sam");
var dateL = Local.getDate();
var moisF = new Array('Jan','Fev','Mar','Avr','Mai','Juin','Juil','Aout','Sep','Oct','Nov','Déc');
var annéeL = Local.getFullYear();
heuresL = ((heuresL < 10) ? " 0" : " ") + heuresL;
minutesL = ((minutesL < 10) ? ":0" : ":") + minutesL;
secondesL = ((secondesL < 10) ? ":0" : ":") + secondesL;
document.getElementById("horlogeL").value = jourF[Local.getDay()] + ", " + dateL +" "+ moisF[Local.getMonth()]+" "+annéeL+"  - "+ heuresL + minutesL + secondesL + " Local";
setTimeout("heureL()",1000);
}
 
window.onload = function() { heure(); heureL(); };
 
</script>
 
</head>
 
<body onload="initInputonload();raz()" style="font-family:verdana; font-size:13px">
 
<div id="1">
		<div class="onoffswitch">
    		<p style="margin-top: 4px; ">
    		<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="offline" checked="">
    			<label class="onoffswitch-label" for="offline">
        		<span class="onoffswitch-inner"></span>
        		<span class="onoffswitch-switch"></span>
    			</label>
		</p></div> 
		<div id="selection"> 
				<p style="margin-top: -1px; "><b>
			<span>
				<font face="Arial" size="5" color="#333333">
				<a target="_blank" style="text-decoration: none; vertical-align: middle; color: #1E3CFF" href="http://www.lamma.rete.toscana.it/mare/modelli/vento-e-mare-hr">Consorzio Lamma</a><span style="vertical-align: middle">&nbsp;</span></font><span style="vertical-align: middle"><font face="Arial" size="5" color="#FF0000">HR&nbsp;&nbsp;&nbsp;</font></span>&nbsp;</span></b>&nbsp;
			<select size="1" id="region" onchange="initInput()" name="D1">
            <option value="z4">Côte d'Azur</option>
			<option value="z5">Corse</option>
           	<option value="z2">Archipel toscan</option>
        	<option value="z1">Ligure</option>
			<option value="z3">Golfe de Gênes</option>
 
 
        </select>
 
        <select size="1" id="type" onchange="initInput()" name="D2">
            <option value="wind10m">Vent</option>
			<option value="mwp">Houle</option>
			<option value="swh">Hauteur des vagues</option>
			<option value="windgust">Rafales</option>
			<option value="sst">Température de la mer</option>
			<option value="pcp">Précipitations</option>
			<option value="ct">Nuages</option>
        </select>  
 
        <select size="1" id="nbrEnd" onchange="changementParametre(event)" name="D3">
            <option value="10">1 jour</option>
			<option value="36">2 jours</option>
			<option value="44">3 jours</option>
			<option value="50">4 jours</option>
			<option value="57" selected="">5 jours</option>
 
        </select>&nbsp;&nbsp;  
        <input type="button" name="RefreshButton" style= "cursor: pointer" value="Chargement des cartes" onclick="afficheImages();raz()">
        <input type="text" style="display:none" id="affichage" value="http://www.lamma.rete.toscana.it/models/ww3_hiwin/last/TYPEREGION_web_*.png" ;="" size="79" name="T1"> 
        <input type="number" style="display:none" id="nbrBegin" onchange="changementParametre(event)" value="1" min="1" max="61" name="T2" size="20">
 
        <b>&nbsp; <font face="Verdana" color="#707070">Ctrl + S</font></b><font face="Verdana" color="#707070"> pour enregistrer les données.&nbsp;</font>&nbsp;&nbsp;&nbsp;&nbsp;
				<label id="pourcentage" style="color: red"> 57</label><label id="nombre" value="nbrEnd" style="color: #707070">/57 images</label></p></div>
<div id="progressBar"><div id="progressBarb" style="width: 100%;"></div></div>
 
 
 
 
 
 
 
 
   <div id="conteneur"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_1.png" id="image 1" style="visibility: visible; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_2.png" id="image 2" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_3.png" id="image 3" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_4.png" id="image 4" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_5.png" id="image 5" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_6.png" id="image 6" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_7.png" id="image 7" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_8.png" id="image 8" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_9.png" id="image 9" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_10.png" id="image 10" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_11.png" id="image 11" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_12.png" id="image 12" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_13.png" id="image 13" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_14.png" id="image 14" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_15.png" id="image 15" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_16.png" id="image 16" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_17.png" id="image 17" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_18.png" id="image 18" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_19.png" id="image 19" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_20.png" id="image 20" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_21.png" id="image 21" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_22.png" id="image 22" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_23.png" id="image 23" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_24.png" id="image 24" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_25.png" id="image 25" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_26.png" id="image 26" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_27.png" id="image 27" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_28.png" id="image 28" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_29.png" id="image 29" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_30.png" id="image 30" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_31.png" id="image 31" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_32.png" id="image 32" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_33.png" id="image 33" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_34.png" id="image 34" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_35.png" id="image 35" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_36.png" id="image 36" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_37.png" id="image 37" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_38.png" id="image 38" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_39.png" id="image 39" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_40.png" id="image 40" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_41.png" id="image 41" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_42.png" id="image 42" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_43.png" id="image 43" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_44.png" id="image 44" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_45.png" id="image 45" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_46.png" id="image 46" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_47.png" id="image 47" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_48.png" id="image 48" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_49.png" id="image 49" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_50.png" id="image 50" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_51.png" id="image 51" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_52.png" id="image 52" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_53.png" id="image 53" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_54.png" id="image 54" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_55.png" id="image 55" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_56.png" id="image 56" style="visibility: hidden; position: absolute;"><img src="./Meteo Consorzio Lamma HR_files/wind10mz4_web_57.png" id="image 57" style="visibility: hidden; position: absolute;"></div>
 <div id="time" style="width: 324px; height: 72px">
 <input id="horloge" readonly="readonly" style="border:1px solid grey; border-radius:2px; text-align:center; font-family:Verdana; color:#FFFFFF; background-color: #4285F4; font-size:12pt; " size="33" name="horloge">
 <p></p>
	<p>
 <input id="horlogeL" readonly="readonly" style="border:1px solid grey; border-radius:2px; text-align:center; font-family:Verdana; color:#0000FF; font-size:12pt; " size="33" name="horlogeL">
 </p></div>
 
 
</div></body></html>
Une bonne âme pour m'aider ?