Having worked with many fastidious web designers in the past requesting that every single integrated page looks precisely to the pixel like the PSD file — you know who you are — I developped this little JavaScript technique that allows the integrator to enable/disable a 80% alpha JPEG image overlay, in order to visually find the discrepancies. The code is very ugly but cross-browser compatible, and I never felt compelled to make it better as it does perfectly what it has to do.

It’s quite easy to use: simply load the JavaScript file at the end of your HTML file, and have it point on your JPEG image to an default X/Y position.

<script language="javascript" type="text/javascript" src="watermarker.js"></script>
<script language="javascript" type="text/javascript">
setWatermark("images/mywatermark.jpg",-4,-5);
</script>

And voila, you can toggle your JPEG overlay, move it around, change it’s alpha transparency and reset it to its default position.

A small demo is available here.

watermarker.js (7.8k)