Se connecter / S'enregistrer
Votre question

[Script]Petite boite qui suit la souris

Tags :
  • Script
  • Programmation
Dernière réponse : dans Programmation
15 Janvier 2011 20:56:46

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

a c 232 L Programmation
16 Janvier 2011 01:15:54

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.
m
0
l
16 Janvier 2011 01:43:42

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 !
m
0
l
Contenus similaires
a c 232 L Programmation
16 Janvier 2011 12:17:35

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.
m
0
l
16 Janvier 2011 14:35:39

Je viens d'essayer mais sa ne me fait qu'un seul petit point chaque côté de l'écran
m
0
l
a c 232 L Programmation
16 Janvier 2011 17:21:40

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
m
0
l
16 Janvier 2011 17:40:48

je laisse tomber...finalement sa ne fait pas très beau, je pense faire mon site en flash finalement..si quelqu'un connait comment faire comme sur le site de DJMast, je suis preneur.. Merci quand même OmaR
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS