<!DOCTYPE html>
<html>
<head>
<title>mv</title>
<meta charset="utf-8">
<script type="text/javascript">
function action (event) {
event = event || window.event; // Compatibilité
var cadre = window.document.getElementById("cadre").style;
// Ici on récupère les valeurs courantes des marges
var gauche = parseInt(cadre.marginLeft);
var haute = parseInt(cadre.marginTop);
var droite = parseInt(cadre.marginRight);
var bas = parseInt(cadre.marginBottom);
// pour chaque direction
switch (event.keyCode) {
case 37: cadre.marginLeft = String(gauche - 20) + 'px'; break;// On effectue le déplacement, ici, 20px à gauche
case 38: cadre.marginTop = String(haute - 20) + 'px'; break;// On effectue le déplacement, ici, 20px à gauche
case 39: cadre.marginLeft = String(gauche + 20) + 'px'; break;// On effectue le déplacement, ici, 20px à gauche
case 40: cadre.marginTop = String(haute + 20) + 'px'; break;// On effectue le déplacement, ici, 20px à gauche
// Pour chaque direction
}
}
</script>
</head>
<body onkeydown="action(event)" onKeyPress="action(event)" >
<span style="border:1px solid red;background-color:red;width:20px;height:20px;margin-left:0px;margin-top:0px; position:absolute;" id="cadre"></span>
</body>
</html>