Bonjour, j'ai adapté un javscript qui permet de faire une sorte de "règle coulissante" sur laquelle se déplace un objet (une div, une image,...) en fonction des déplacements de la souris. L'objectif est de placer un menu avec des onglets juste en dessous et que lorsque l'on rentre dans la zone des onglets, le pointeur se déplace.
Actuellement, le pointeur dépasse la zone (border-top rouge dans mon exemple) et le scripte s'exécute en permanence et non pas seulement quand je rentre dans la zone des onglets (qui n'est pas encore créée - j'ai mis un div vide à la place).
Testez plutôt ce scripte, vous verrz mieux ou je veux en venir... (Si possible, mettez des commentaires dans vos suggestions. Je fais ça pour m'entraîner et non pour des fins commerciaux) :
<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/
var x = 0;
var dist=-0
var vit=5
var total=0
var mess
var posX = 0;
var posY = 0;
var animate = true;
var imag1 = "illus/fleche.gif";
if (document.getElementById)
{
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = Pos_Souris;
window.onload = depl_img;
}
function Pos_Souris(p)
{
x = (navigator.appName.substring(0,3) == "Net") ? p.pageX : event.x+document.body.scrollLeft;
}
function depl_img()
{
if (document.getElementById && animate)
{
document.getElementById("idjoe").style.left = posX+dist;
vitess = setTimeout("depl_img()",10)
posX = posX+((x-(posX+200))/vit);
if(posX+dist!=0)
{
imag2='illus/fleche.gif';
dist=distg
}
else
{
imag2='illus/fleche2.gif';
dist=distd
}
if(imag2!=imag1)
{
document.joe.src=imag2;
imag1=imag2;
}
}
}
if(document.getElementById)
{
document.write('<body style="margin-left: 20%; margin-right: 20%; margin-top: 0px;">');
document.write('<div style="width: 100%; border-top: red solid 2px;">');
document.write('<div id="grande" style="position: relative;">');
document.write('<div id="idjoe" style="position: relative; width:10px; height: 10px; background: red;"></div>');
// document.write('<img src="illus/fleche.gif" name="joe" border="0" hspace="0" vspace="0" >');
document.write('</div>');
document.write('</body>');
}
//-->
</script>
