Use this Javascript code template to define recipe image maps using the HTML Widget. Be sure to include the contents of javascript first.

<script type="text/javascript">
recipe("grid_image.png",
"", "", "",
"", "", "",
"", "", "",
"");
</script>

Here is an example:
<script type="text/javascript">
recipe("crowbar.png",
"", "Rose Red (Vanilla)", "Iron Ingot (Vanilla)",
"Rose Red (Vanilla)", "Iron Ingot (Vanilla)", "Rose Red (Vanilla)",
"Iron Ingot (Vanilla)", "Rose Red (Vanilla)", "",
"Crowbar (Tool)");
</script>

Result:



For those curious, the javascript used to achieve this is posted below. Editors of the Railcraft wiki can ignore this bit. You only need this if you want to setup a similar system on another wiki.

<script type="text/javascript">
var mapNum = 0;
 
function recipe(img, slot1, slot2, slot3, slot4, slot5, slot6, slot7, slot8, slot9, output){
   document.write("<img src=\"http://railcraft.wikispaces.com/file/view/"+img+"\" alt=\"recipe\" usemap=\"#recipe"+mapNum+"\" />");
   document.write("<map name=\"recipe"+mapNum+"\">");
   mapNum = mapNum + 1;
   document.write("<area shape=\"rect\" coords=\"14,25,46,57\" href=\""+slot1+"\" alt=\""+slot1+"\" title=\""+slot1+"\" />");
   document.write("<area shape=\"rect\" coords=\"49,25,81,57\" href=\""+slot2+"\" alt=\""+slot2+"\" title=\""+slot2+"\" />");
   document.write("<area shape=\"rect\" coords=\"84,25,116,57\" href=\""+slot3+"\" alt=\""+slot3+"\" title=\""+slot3+"\" />");
   document.write("<area shape=\"rect\" coords=\"14,60,46,92\" href=\""+slot4+"\" alt=\""+slot4+"\" title=\""+slot4+"\" />");
   document.write("<area shape=\"rect\" coords=\"49,60,81,92\" href=\""+slot5+"\" alt=\""+slot5+"\" title=\""+slot5+"\" />");
   document.write("<area shape=\"rect\" coords=\"84,60,116,92\" href=\""+slot6+"\" alt=\""+slot6+"\" title=\""+slot6+"\" />");
   document.write("<area shape=\"rect\" coords=\"14,95,46,127\" href=\""+slot7+"\" alt=\""+slot7+"\" title=\""+slot7+"\" />");
   document.write("<area shape=\"rect\" coords=\"49,95,81,127\" href=\""+slot8+"\" alt=\""+slot8+"\" title=\""+slot8+"\" />");
   document.write("<area shape=\"rect\" coords=\"84,95,116,127\" href=\""+slot9+"\" alt=\""+slot9+"\" title=\""+slot9+"\" />");
   document.write("<area shape=\"rect\" coords=\"190,52,237,99\" href=\""+output+"\" alt=\""+output+"\" title=\""+output+"\" />");
   document.write("<\/map>");
}
</script>