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.

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:

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.

Copyright © 2020, Goat 1000