Glowspot - A glowing link hover effect using Javascript

One day I found myself looking at the tabs in Chrome, passing my mouse cursor over them and wondering if I could reproduce the effect. So, after a bit of pondering and poking about, I came up with this script.

Move your cursor over the tabs above to see the effect. This should work in Firefox, Chrome, Opera, IE9 and Safari. The links have a background colour and a repeating image.

The effect is not quite the same as Chrome's tabs. In Chrome, the tabs fade to the glowing state and back to the deselected state when the mouse enters and leaves them, but this script changes state immediately.

(The links on the tabs above don't go anywhere, I have just put them here as a demonstration.)

The script exists as both standalone and jQuery plugin versions. The standalone version is limited to making <a> links glow, but you can use the jQuery plugin version to add the glowing mouseover effect to the elements of your choice.

How to use it

Here is the code to add the glow effect to links in a list called "tabs":

<script src="glowspot.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
  try {
    glowspot('tabs', { size: 150, intensity: 0.8 });
  } catch(e) {
    // something went very wrong
  }
};
//]]>
</script>

A similar jQuery plugin version:

<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="jquery.glowspot.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
  $('#tabs a').glowspot({ size: 150, intensity: 0.8 });
  $('input').glowspot({ colour: '120,255,120' });
});
//]]>
</script>

In this example, the same setting have been given to the links inside the element with an ID of "tabs". I've also made all inputs have a green glow when the mouse hovers over them.

Download the script from here: glowspot.js (4.3k) or: glowspot.min.js (minified) (2.8k)
jQuery version: jquery.glowspot.js (3.9k) or: jquery.glowspot.min.js (minified) (2.6k)

If you take a look at the scripts you will see that all files are released under the LGPL v3 license.

Functions

The script contains one exported function: glowspot for the standalone version or jquery.glowspot for the jQuery version.

Standalone version:

glowspot(id [, options]);

jQuery version:

$('selector').glowspot([options]);

For the standalone version, the first argument is the ID of the element containing the links to be affected. For my example above, "tabs" is the ID of the ul element containing a list of links. This argument is not required by the jQuery version, you should call $('selector').glowspot() instead, replacing 'selector' with your choice of selectors.

The options argument is not required, though it provides a few ways to customise how the glow appears:

OptionDefaultDescription
size180 The size (radius) of the glow spot in pixels. If you set this to a small number, the glow will appear as a small blob under the cursor!
intensity0.9 Opacity of the centre of the glow spot.
colour'255,255,255' The colour of the glow - it must be in R,G,B format, as it is inserted into a rgba(R,G,B,A) value exactly as provided.

How it works

Oops! Try another browser:
Chrome
Firefox
Opera

The script creates a canvas element something like the one on the right, although this one is only half the size of the canvas used for the tabs above. The settings for size, colour and intensity are used to fill the whole canvas with a radial gradient. I've added a checkerboard pattern to this example to show the transparency of the gradient a bit better.

You can't use a canvas as an element's background though, so after the gradient has been drawn, the canvas pixels are converted to a PNG image data: URL using the toDataURL function. This URL is stored in a variable for later.

The script uses the following createGlow function to generate the canvas data. The rgb and a arguments are the colour and intensity options, c is the (previously created) canvas element, and r is the size option.

function createGlow(rgb, a) {
  var ct = c.getContext('2d'), g = ct.createRadialGradient(r,r,0,r,r,r);
  g.addColorStop(0, 'rgba(' + rgb + ',' + a + ')');
  g.addColorStop(1, 'rgba(' + rgb + ',0.0)');
  ct.fillStyle = g;
  ct.fillRect(0, 0, r * 2, r * 2);
  durl = 'url(' + c.toDataURL() + ')';
}

Next, the script adds event handlers for the mouseover, mouseout and mousemove events on each of the links inside the element specified in the call to the glowspot function.

When the cursor enters one of the links, the link's style.backgroundImage is set to the data: url stored in the durl variable. If the element already has background images, the glow image is inserted at the start of the list to appear over the top of the existing images. The relevant style.backgroundPosition is then set to position the centre of the gradient under the mouse cursor in the mousemove event handler.

When the mouse leaves the glowing element, the background properties are restored to the values they had previously, removing the glow image and its associated background properties.

History

Version 1.1.1 [23/07/2013]
Minor updates to improve performance.
Version 1.1 [25/01/2012]
Added support for overlaying on top of existing background images.
jQuery plugin version 1.0 [18/07/2011]
First jQuery plugin version released.
Version 1.0 [12/05/2011]
First version released.

Help!

As per the usual disclaimer, this script comes with no guarantees. But if you get stuck, find a bug or have some useful suggestions, please contact me: graham (at) goat1000.com.

This site uses cookies - details here.