How to Make a Firefox Transparent Mouseover

Place transparent regions on your Web page to react to the mouse cursor.

A transparent mouseover is an invisible HTML element that occupies a block of space on a Web page. When the user's mouse cursor passes over the space, a Javascript function is called to perform whatever actions you like. Transparent mouseovers are versatile; you can place them over other elements such as paragraphs of text, or put them in arbitrary locations on the page to achieve interesting effects.

Instructions

1. Insert the following CSS and Javascript code between the "head" tags of your HTML document:

   <style type="text/css">

   .container{

   position:relative;

   display:inline-block;

   }

   .mousearea{

   position:absolute;

   width:100%;

   height:100%;

   z-index:1;

   }

   </style>

   <script type="text/javascript">

   function mouseOver(){

   alert("mouseover detected");

   }

   </script>

2. Add the following code to the body of your HTML document:

   <p class="container"><span class="mousearea" onMouseOver="mouseOver();"></span>This text has a transparent mouseover area above it.</p>

3. Save the page and load it in Firefox. Pass your mouse over the text, and a popup dialog appears.

4. Arbitrarily position and size the mouseover area on the page by taking it outside of the "p" tags so its parent element is "body", changing the "width" and "height" properties, and setting the "left" and "top" properties. For example, change the ".mousearea" declaration in the CSS code to the following:

   .mousearea{

   position:absolute;

   width:200px;

   height:200px;

   left:500px;

   top:100px;

   z-index:1;

   }

   Save the page and reload it in Firefox. Move your mouse to the area 500 pixels to the right of the left edge of the window and 100 pixels from the top. The alert dialog appears.