layout_overlay.user.js

// ==UserScript==
// @name           Layout Overlay
// @namespace      jdesrosiers
// @include        http://localhost/projectname/*
// ==/UserScript==

switch ( window.location.href.match(/([^\/]+\.html)$/i)[0] ) {
  case 'index.html':
    var mockupImg = 'indexlayout.jpg'; break;
  case 'about.html':
    var mockupImg = 'About.jpg'; break;
}

var mockupStyles = 'background:url(\'jpegs/'+mockupImg+'\') no-repeat 50% top';
var body = document.getElementsByTagName('body')[0];
body.innerHTML = '<div id="mockup" style="'+mockupStyles+'"></div>' + body.innerHTML;
var mockup = document.getElementById('mockup');
var minSize = '20px';
var maxSize = mockup.style.height;

var toggle = function(e){
  if (e.target.style.height == minSize) {
    e.target.style.height = maxSize;
  } else {
    e.target.style.height = minSize;
  };
};


if (mockup.addEventListener) {
  mockup.addEventListener('click', toggle, false);
} else if (mockup.attachEvent) {
  mockup.attachEvent('onclick', toggle);
}