Read introduction on the Shepherd Interactive blog.

This script allows you to overlay a design comp onto a page so that the CSS formatting and layout can be ensured to be pixel-perfect; the overlaid design comp can be placed in whatever location on the screen, and it can be displayed with an opacity so that the comp and the page can be seen at the same time for comparison. This greatly facilitates the developer's task of implementing a designer's comp, it helps developers ensure their layout looks the same across browsers, and it is also a way for clients and designers to verify the developer's work.

The comp overlay can be toggled by pressing Shift+Spacebar when a query string is provided in the location.hash with the following parameters:

• comp - URL to the image to be overlaid
• opacity - how opaque the overlay is (values from 0.0 to 1.0; default is 0.8)
• align - either 'left', 'center', 'right', or a pixel value from the left (default left)
• left - number of pixels from the left (default 0) - use with align:left
• right - number of pixels from the right (default 0) - use with align:right
• top - pixels from the top (default 0)
• interval - millisecond-interval that the step opacity is applied (default 10)
• step - amount of opacity that is added or subtracted at each "interval" (default 0.1)
• z-index - where the comp is layered on the page (default 100)
• when - milliseconds after page-load that comp is displayed (defaults to -1, meaning disabled)

See the examples page to see the script in action.

It works well if the hash query strings are bookmarked so that they can be quickly recalled for a page and activated; also works well if in the footer a list is included of links to all of the comp-overlay hash URLs for all of the comps, for easy reference. Also ideal for use with Firebug so that elements can be repositioned and re-styled while the comp is overlaid. Works in A-grade browsers (such as Firefox, MSIE 6+, and Safari).

This script can either be included via a script element, or can be dynamically added to the page via a user script. It is POJ: Plain Old Javascript—no external libraries (like jQuery) are needed.

<script type="text/javascript" src="http://shepherd-interactive.googlecode.com/svn/trunk/overlay-comp/overlay-comp.js"></script>

Download: overlay-comp.js

See also

• Pixel Perfect add on for FireBug