Se connecter avec
S'enregistrer | Connectez-vous

[Script]Petite boite qui suit la souris

Dernière réponse : dans Programmation

Bonjour à tous et merci en avance pour l'aide.. j'ai un site perso en html/css et j'aimerais bien placer un trucs comme sur le site de DJ Mast (http://djmast.fr/), la petite boite qui suit le dessous de la souris et les axes en x et y qui démontre la position...C'est en quel language et est-ce facile ? Y-a-t'il un script déjà fait pour sa ? Merci en avance !

Autres pages sur : script petite boite suit souris

Lassé par la pub ? Créez un compte
Expert Programmation

Salut,

Là dans son cas, c'est du flash, mais ça peut se faire avec du javascript. Avec des recherches sur "javascript suivre souris" tu devrais pouvoir trouver des scripts tout faits qui suivent la souris.

Je viens de faire la recherche, j'ai trouvé quelque chose qui m'a beaucoup aidé, je l'ai modifié un peu et voilà le code :

Citation :
<script type="text/javascript">
var swidth = (screen.width)-60;
var sheight = (screen.height)-200;
var x, y;
window.onload = init;

document.write("<div id=test style=\"position:absolute;visibility:visible;left:0px;top:0px;width:1px;height:1px; color: red; font-weight: bold;\">\
|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>|<br/>\
</div>");
document.write("<div id=test2 style=\"position:absolute;visibility:visible;left:0px;top:0px;width:1px;height:1px; color: red; font-weight: bold;\">\
____________________________________________________________________________________________________________________________________________________________________________________________________________\
</div>");
document.write("<div id=test3 style=\"position:absolute; visibility:visible; left: "+swidth+"px;top:0px;width:1px;height:1px; color: red; font-weight: bold;\">\
_____\
</div>");

function init() {
if (window.Event) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = getXY;
}

function getXY(e) {
x = (window.Event) ? e.pageX : event.clientX;
y = (window.Event) ? e.pageY : event.clientY;

if(x < swidth)
document.getElementById("test").style.left = x+"px";
if(y < sheight)
{
document.getElementById("test2").style.top = y+"px";
document.getElementById("test3").style.top = y+"px";
}
}
</script>


Cependant, quand on bouge la souris, elle n'apparaissent pas continuellement, quand sa bouge sa disparait,réparait,disparait, etc.. peut-on régler sa ? ET j'aurais besoin d'aide au lieu de faire une infinité de barre dans le code, comment peut-on détecter la grandeur de l'écran et dire au code d'en mettre tel quantité en fonction de l'écran ?

Merci en avance !
Expert Programmation

A mon avis, plutôt que de faire des lignes avec | et _, tu devrais pouvoir utiliser la bordure de tes éléments pour créer une ligne.
En mettant des border:1px solid black; dans le style de tes div, tu devrais pouvoir faire ça.
Expert Programmation

Bah parce que tu as mis une div de 1px d'auteur et de largeur...
Il faut que tu mettes une div de 100% de largeur, et 1px de hauteur (pour le trait horizontal), et l'inverse pour le vertical
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde