Breadboard applet
Alexander Hiam - 8/2012

This applet is in the public domain.

To use, create a div of class 'breadboard'. Place in it an img
tag pointing at breadboard/img/breadboard.jpg, then place img
tags of class 'overlay', each with an id set. Be sure to link 
to breadboard.css, JQuery and then this file (breadboard.js) 
in the head section, and each 'breadboard' div will display the
breadboard.jpg image, and each overlay image will be hidden and
will have  abutton to toggle its visibility. The overlayed images
will overlap in the order they are put in the HTML. 

Button labels are generated by parsing the overlay's id attribute,
and recognizes a couple special characters:

  '--'  -  Two dashes will be replaced by a space

  '__'  -  Two underscores indicate the end of the name, and they
           will be ignored along with anything following them. This 
           is helpful if there are two breadboard apps on the same 
           page that both toggle the same image, as the ids can 
           end with __1 and __2, and they can have the same button 
           labels.

Check out the example in breadboard.html.

To easily create overlays in Gimp, use img/breadboard.jpg as a 
background and create a new layer on top of it, deleting the new 
layers background color so it is completely transperent. Then, with
the new layer selected, use the drawing tools to add any wires or 
components you want. When finished, hide the background layer, so 
all you see is what you've drawn on a checkerboard transperent
background, then save it as a png (or any other image format that
supports transparency). Then just place it in a breadboard applet
div per the above instructions.