<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>calques</TITLE>
<META http-equiv=Content-Type content=text/html;charset=iso-8859-1>
<STYLE type=text/css>
BODY {
margin: 0px;
color: black;
background-color:#D1AB7A;
text-align:center;
font-size:14px;
font-family: arial, helvetica;
}
#mon_cac {
POSITION: absolute;
Z-INDEX: 20;
LEFT: 250px;
TOP: 80px;
WIDTH: 100px;
HEIGHT: 100px;
PADDING: 0px;
MARGIN: 0px;
BACKGROUND-COLOR: red;
border: 1px solid blue;
}
.but{
height:23px;
text-align:center;
background-color: silver;
border-top: 2px solid white;
border-left: 2px solid white;
border-bottom: 2px solid black;
border-right: 2px solid black;
}
.but02{
cursor: pointer;
height:23px;
text-align:center;
background-color: silver;
border-top: 2px solid black;
border-left: 2px solid black;
border-bottom: 2px solid white;
border-right: 2px solid white;
}
</STYLE>
</HEAD>
<BODY>
<!-- boitier de pilotage -->
<DIV id=cont style="float:left; width:150px; font-size:14px; font-family: arial; font weight: bold; border:0px solid blue; margin-top: 10px; margin-left: 10px;text-align:center;">
<div style="width:50px;" class="but" onmouseover="bouge(1);this.className='but02';" onmouseout="tafini();this.className='but';">haut</div><br>
<div style="float:left; width:54;" class="but" onmouseover="bouge(3);this.className='but02';" onmouseout="tafini();this.className='but';">gauche</div>
<div style="float:left; width:40;"><INPUT size=3 value=5 id="nb" name="nb" style="background-color:black; color: yellow;border: 1px solid yellow;"></div>
<div style="float:left; width:54;" class="but" onmouseover="bouge(4);this.className='but02';" onmouseout="tafini();this.className='but';">droite</div><br><br>
<div id=soucont style="float: left; height:10px; width:150px; border:0px solid blue;">
<div id="less" style="float: left; width:30px; margin-left:7px;padding-top: 3px; cursor: pointer;" class="but" onClick="moreless(0);" onmouseDown="this.className='but02';" onmouseUp="this.className='but';">-</div><div style="float: left; margin-left:5px; width:50px;" class="but" onmouseover="bouge(2);this.className='but02';" onmouseout="tafini();this.className='but';">bas</div><div id="more" style="float: left; width:30px; margin-left: 5px; padding-top: 3px; cursor: pointer;" class="but" onClick="moreless(1);" onmouseDown="this.className='but02';" onmouseUp="this.className='but';">+</div>
</div>
</DIV>
<div id="txt" style="text-align:center;"><br><br>
Ce script permet de déplacer un calque dans 4 directions à la vitesse que l'on veut.<br>
augmentation/diminution de la vitesse par clic sur faux-boutons dhtml ou saisie directe dans zone d'affichage.<br>
Déplacement par survol de faux-boutons dhtml.</div>
<!-- le calque -->
<DIV id=mon_cac style="width:100px; height:100px;"></DIV>
<SCRIPT type=text/javascript>
// position du calque par rapport au haut
istop=80;
// la position du calque par rapport au coté gauche
isleft=250;
// longeur du calque
iswidth=100;
// hauteur du calque
isheight=100;
var nb;
var z;
document.all?IE=1:IE=0;
if (IE) { document.all('mon_cac').style.pixelTop=istop; document.all('mon_cac').style.pixelLeft=isleft;document.all('mon_cac').style.width=iswidth;document.all('mon_cac').style.height=isheight;}
function bouge(direction) {
eval('move('+direction+')');
ch=setTimeout('bouge('+direction+')',200);
return ch;
}
function tafini() {
clearTimeout(ch);
}
function moreless(z){
if (z>=1)
{document.getElementById('nb').value++ }
else if
(document.getElementById('nb').value<=1) return;
else
{document.getElementById('nb').value-- }
}
function move(direction) { //1=haut, 2=bas, 3=gauche, 4=droite
nb=document.getElementById('nb').value;
if(IE) {calque="document.all('mon_cac').style";px="";W=document.body.clientWidth;H=document.body.clientHeight;}
pix=(direction==1 || direction==2)?"posTop":"posLeft";
signe=(direction==1 || direction==3)?"-":"+";
width=parseInt(eval(calque+'.width'));
height=parseInt(eval(calque+'.height'));
newpos=eval("parseInt(eval(calque+'.'+pix))"+signe+""+nb)
if (signe=="-" && newpos<=0)
newpos=0;
else if (signe=="+" && newpos>=(W-width) && direction==4)
newpos=(W-width);
else if (signe=="+" && newpos>=(H-height) && direction==2)
newpos=(H-height);
eval(calque+'.'+pix+'='+newpos)+px;
}
</SCRIPT>
</BODY>
</HTML>