Example 1 - Box (div) following mouse pointer - Javascript Tooltips, Popups, Captions

olly · #1 10-25-2005, 09:21 PM

The example below demonstrates basic event handling and cross browser code (I've tested in IE and FF, doesn't work in Opera some subtle changes are needed for this).

Code:

<html>
   <body style="font-family:arial;font-size:12px" onmousemove="updatebox(event)" onclick="stopstartbox()">
      <div id="mydiv" style="position:absolute;width:200px;height:150px;background:#ABABAB;border:1px solid #000000"></div>
      <b>Move your mouse around the screen.  The box will follow.  Single click to start/stop the box following the cursor.</b>
      <script>
         boxmove=true;
         
         function stopstartbox() {
            boxmove=!boxmove;
         }
         function updatebox(evt) {
            if (boxmove) {
               mouseX=evt.pageX?evt.pageX:evt.clientX;
               mouseY=evt.pageY?evt.pageY:evt.clientY;
               document.getElementById('mydiv').style.left=mouseX;
               document.getElementById('mydiv').style.top=mouseY;
            }
         }
      </script>
   </body>
</html>

Click below to see in action
http://boxover.swazz.org/javascript_...div_FF_IE.html

manonivas · #2 12-31-2006, 07:24 AM

Om Shanti!
N.Manohara Kurup,
Thoppil House, Pollethai P.O,
Mararikulam,
Alappuzha- 688567, Kerala, India.
Tel: 0478- 2865432
E-mail: mano@bizhat.com
Web: http://mano.bizhat.com

Sir,
Received your address from http://boxover.swazz.org/forum/newre...oquote=1&p=876.

Please send me a "cool dhtml tooltip script" which supports.
Also I wish make the home page of my new proposed website with an animated rain fal image.

If you have anyone of that, please send me a beautiful one.

Pl. send your reply to my email: manonivas@yahoo.com or as a reply for this message.

Regards
N. Manohara Kurup

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode