YUILight - Spotlight Your Page Elements With YUI

YUILight is a customisable YUI Script that will highlight an element on your page simply by applying a class of 'yuilight' to that element. When that element is clicked and focused on, everything else on the page will be covered by a mask and that single element will stand out from the rest.

It is a very simple script to implement only requiring two javascript files and no CSS! The options for customising the script can be found at the top of the javascript file (which is fully commented for you). At the moment you can change the generic background colour (when no background colour has been specified for the element). This option is so that your element doesn't disappear with the text.

You can also configure the opacity of the mask element and the animation speed that it shows and hides. I will be adding more customisable fields later on but if you have any requests please feel free to leave them in the comments section at the bottom of this post.

<script type="text/javascript" src="yui/utilities.js"></script>
<script type="text/javascript" src="yui/yuilight.js"></script>

I've prepared a little example page here which will guide you through the various options in a little more detail. Comments welcome below and please enjoy the script!