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.

I. Overview

The scrolling stock ticker above is a simple example of a lightweight component for retrieving real-time data and displaying it dynamically in a web browser. Many stock tickers today are based on heavy Java applets, which tend to slow down my computer considerably. Other tickers based on JavaScript and Ajax do not have a scrolling feature. The basic marquee scrollers do not retrieve real-time data. So, I decided to develop my own simple scrolling stock ticker which combines all of these functions.

II. Consulting

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

III. Components

1. Stock Data Retrieval Component

This component is a group of PHP functions for querying a web data source, retrieving the resulting data, and storing the result in a DOM document object. These functions are located in a standalone PHP file.

First, the stock quotes are retrieved using the @fopen() file pointer to the following url:

The Yahoo Finance site will return a comma-delimited CSV file based on the query parameters. More info on Yahoo’s data protocol can be found here. Other web services return data in RSS, JSON, or XML formats, which will require different query and parsing methods.

Next, the CSV-formatted results are parsed by the @fgetcsv() function, which stores the comma-delimited values into an array. The array values are then placed into <span> elements and returned in the following format:

2. CSS Display Component

Not exactly a “component”, this is simply a CSS file which contains formatting for the <span> data above. For example:

3. Ajax Stock Update Component

This component is a group of JavaScript functions for dynamically updating the stock quotes using Ajax. Ajax is a group of web techniques for updating a web page without the user having to press the Refresh button.

The function uses the http_request.onreadystatechange property to call the Stock Data Retrieval Component (i.e. the standalone PHP file) to retrieve a new set of <span> elements containing the newly-updated stock quotes. The document object is then updated dynamically by replacing the <span> contents of the <div id=”RayStockTickerID”> node as follows:

4. Scrolling Marquee Component

This component is a group of JavaScript functions which retrieve the stock quotes from the DOM document object, display the css-formatted stock quotes in a line of text, then scroll the text from right to left one pixel at a time with the setTimeout() function.

As each stock quote falls off the left of the screen, its <span> node is removed and appended to the end of the chain to create a continuous loop. At the end of each loop, the stock quotes are updated dynamically by the Ajax Stock Update Component.

5. Chart Display Component

When you move the mouse to a particular stock in the ticker, this component will display an overlay of the corresponding daily stock chart. This is accomplished using onmouseover() event handlers within each stock’s <span> tag. The onmouseover() event calls a function which dynamically creates an <img> element and retrieves the chart from Yahoo Finance 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’.

6. Main Component

The main component is a a section of PHP code in the main website which creates all the components above and initiates the program.

IV. Future Enhancements

A. Different Input Formats

As mentioned above, the input data streams may be formatted in RSS, JSON, XML, etc. Functions can be developed for parsing and querying these other data protocols.

B. Caching

This simple project does not implement caching since it does not use previous stock data. A cache can be developed to store data into an external database or text file before displaying it on the screen.

C. Data Processing

The incoming data can be processed and enriched before displaying to the web page. For example, the stock ticker could display only those stocks which have crossed their 50-day moving average, or those that have exceeded their daily VaR limits within a portfolio.

D. Different Output Formats

Instead of a simple scrolling ticker display, this app can be modified to create an output data stream in other formats like RSS, JSON, XML, database, e-mail, etc, or other platforms such as Facebook, Twitter, and mobile devices.