The Image Overlay Project

I. Overview

This is a simple project for displaying an image overlay whenever the user moves the mouse over an element on the web page. This effect is demonstrated on my website in the menu items above, the scrolling stock ticker, and the icons to the right of my photo.

This feature is useful for displaying value-added information quickly on the same web page without requiring the user to click the mouse, find the information on a different page, then click back to the original page. It is also helpful for mobile devices with limited screen space, where small icons representing web sites can be enlarged as the user moves the mouse over them.

II. Source Code

I do my best to explain the concepts and techniques behind my projects, but I cannot provide the complete source code. If you like my work and can use my expertise in your projects, I am available for consulting at a very competitive rate.

III. Components

1. Mouse Position Component

This component captures the mouse cursor’s current position, which is later used to determine the screen position for displaying the image overlay. It uses <div< elements for the X and Y position of the mouse, then updates those variables as follows:

The getCursorXY() function uses the value of document.body.scrollLeft and document.bodyscrollTop to determine the mouse cursor’s X and Y position on the web page.

2. Event Assignment Component

This component is a set of JavaScript functions for assigning events to trigger elements such as icons or text, which are assumed to be in basic form, such as an <img> or <a>. It finds a trigger element and encapsulates it in a <div> or <span> tag containing mouseover, mousemove, and mouseout events pointing to the corresponding JavaScript functions. For example:

3. Image Display Component

This component is a set of JavaScript functions which respond to the mouse events and display the image overlay. The onmouseover() event calls a function which dynamically creates an <img> element from a file as follows:

The mousemove() function moves the chart based on the mouse cursor’s current position. The onmouseout() function hides the chart by setting the imgbox visibility to “hidden”

IV. Future Enhancements

1. Dynamic Image Caching

I do not currently implement caching on this website. Consequently, there is an intermittent delay when retrieving images as you move the mouse over certain items such as the scrolling stock ticker. A cache can be developed to automatically create image snapshots of this information and display the cached image instead.

2. Other Types of Overlay

The overlay effect can enhanced to display dynamic content types such as dynamic stock charts, video surveillance cameras, and real-time GPS maps, rather than just static images. The possibilities are endless.