Overview

jsgridoverlay is a jquery plugin that allows you to overlay an image onto an html page - a working demo is included in the source.

Usage

Pretty easy to use, just import this into your HTML:

 <script type="text/javascript" src="./PATH/TO/jquery.cookie.js"></script>
 <script type="text/javascript" src="./PATH/TO/jquery.gridoverlay.js"></script>

And then in your JS you initialise it on DOM load:

 var gridSettings = {
     imgExt: "jpg",
     gridPos: "center top"
 };
 $.gridOverlay("/PATH/TO/JPEG/templates/", gridSettings);

In the templates folder, just drop in a bunch of jpegs, the file names of which have to match the id's you use on the html body elements.

Then, when you look at the page in your browser, you can overlay the image by pressing control and ;

If you press control and [ or control and ] you can change the transparency of the overlay.