Javascript - Les coordonnées de la souris

Faites un copier coller du code ci-dessous et lancez le dans votre navigateur.
Si vous souhaitez voir le résultat en démo (selon nous une bonne méthode d'apprentissage) cliquez ici (nouvelle fenêtre).

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta content="text/html;charset=utf-8" http-equiv="content-type" /> <style type="text/css"> //We hide the box at first (hidden) #box{ width: 200px; height: 100px; overflow:hidden; visibility: hidden; background-color:#8f8f8f; color:red; position:absolute; opacity:.50; filter:alpha(opacity=50); -moz-opacity:0.5; } //we give a style to the close button which is only a link a.close{width:20px;height:20px;text-align:center;margin:5px; border:1px solid black;float:right;background-color:white;color:red; font-size:16px;text-decoration:none} </style> <script language="javascript">  </script> </head> <body> <div id="box"> <a href="#" onclick="javascript:closeBox();return false;" class="close" title="Close the box">X</a> The content of the box which is shown on click from the link.<br /> You can add anything here as usually... </div> <a href="#" onclick="javascript:ShowBox(event);return false;">Click me to load</a> </body> </html>

For explicit information about the browser detection and problems occuring accross browsers, you check these sources:
http://developer.mozilla.org/en/docs/DOM:event
http://msdn.microsoft.com/...dhtml_overviews_entry.asp
http://msdn.microsoft.com/.../browserdetection.asp

In addition to studying the way it's done to retrieve the mouse coordinates, I have added a bit of CSS code to manage the opacity of a box and the simple visual effect of the same box including the link tag.

Commentaires

Postez le premier commentaire maintenant
ou venez en discuter à cette adresse:
Forum - Javascript (displaying a box on mouse event)

Coin du Webmaster

Vous disposez d'un site à forte audience?

Obtenez votre Kit Graphique pour vos sites!

Engagez des Freelance Pro.

Javascript - Les coordonnées de la souris

Javascript - Les coordonnées de la souris

Commentaires

Coin du Webmaster

Catégories