Правила:
| - 1,4,7 | | - 2,3 |
| - 3,5,9 | | - 0,8,9 |
| - 0,6,8 |
А вот исходный код этой страницы. Здесь используется css, javascript и только одна единственная картинка.
<html>
<head><title>Замочки</title>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<style>
.c1,.c2,.c3,.c6,.c9,.pl,.mi,.mu,.di,.eq {background-image:url(carpets.png) }
.c1 { background-position: 60px 0 }
.c2 { background-position: -60px 0 }
.c3 { background-position: -60px 60px }
.c6 { background-position: 0 60px }
.c9 { background-position: 0 0 }
.pl { background-position: 60px 20px }
.mi { background-position: 40px 20px }
.mu { background-position: 20px -60px }
.di { background-position: 20px -80px }
.eq { background-position: 20px 20px }
.carpet {border-collapse: collapse; padding:20px;}
.carpet tr {height:20px; padding:0px;}
.carpet td {width:20px; padding:0; text-align:center; font-weight:bold; font-family:"Franklin Gothic Medium",Tahoma; font-size:20px;}
table { font-weight:bold; font-family:"Franklin Gothic Medium",Tahoma; font-size:20px; }
div { float:left; }
</style>
<script type="text/javascript">
var s
='<table class=carpet> '
+' <tr><td rowspan=3 colspan=3 class=#1#>%1% '
+' </td><td></td><td rowspan=3 colspan=3 class=#2#>%2% '
+' </td><td></td><td rowspan=3 colspan=3 class=#3#>%3% '
+' </td><td></td><td rowspan=3 colspan=3 class=#4#>%4% '
+' </td></tr> <tr><td class=#17#> '
+' </td><td class=#18#> '
+' </td><td class=#19#> '
+' </td></tr><tr><td></td><td></td><td></td></tr> '
+' <tr><td></td><td class=#20#> '
+' </td><td></td><td></td><td></td><td class=#21#> '
+' </td><td></td><td></td><td></td><td class=#22#> '
+' </td><td></td><td></td><td></td><td class=#23#> '
+' </td><td></td></tr> '
+' '
+' <tr><td rowspan=3 colspan=3 class=#5#>%5% '
+' </td><td></td><td rowspan=3 colspan=3 class=#6#>%6% '
+' </td><td></td><td rowspan=3 colspan=3 class=#7#>%7% '
+' </td><td></td><td rowspan=3 colspan=3 class=#8#>%8% '
+' </td></tr> <tr><td class=#24#> '
+' </td><td class=#25#> '
+' </td><td class=#26#> '
+' </td></tr><tr><td></td><td></td><td></td></tr> '
+' <tr><td></td><td class=#27#> '
+' </td><td></td><td></td><td></td><td class=#28#> '
+' </td><td></td><td></td><td></td><td class=#29#> '
+' </td><td></td><td></td><td></td><td class=#30#> '
+' </td><td></td></tr> '
+' '
+' <tr><td rowspan=3 colspan=3 class=#9#>%9% '
+' </td><td></td><td rowspan=3 colspan=3 class=#10#>%10% '
+' </td><td></td><td rowspan=3 colspan=3 class=#11#>%11% '
+' </td><td></td><td rowspan=3 colspan=3 class=#12#>%12% '
+' </td></tr> <tr><td class=#31#> '
+' </td><td class=#32#> '
+' </td><td class=#33#> '
+' </td></tr><tr><td></td><td></td><td></td></tr> '
+' <tr><td></td><td class=#34#> '
+' </td><td></td><td></td><td></td><td class=#35#> '
+' </td><td></td><td></td><td></td><td class=#36#> '
+' </td><td></td><td></td><td></td><td class=#37#> '
+' </td><td></td></tr> '
+' '
+' <tr><td rowspan=3 colspan=3 class=#13#>%13% '
+' </td><td></td><td rowspan=3 colspan=3 class=#14#>%14% '
+' </td><td></td><td rowspan=3 colspan=3 class=#15#>%15% '
+' </td><td></td><td rowspan=3 colspan=3 class=#16#>%16% '
+' </td></tr> <tr><td class=#38#> '
+' </td><td class=#39#> '
+' </td><td class=#40#> '
+' </td></tr><tr><td></td><td></td><td></td></tr> '
+'</table> '
;
function w(n) {document.write(n)};
function carpet(n,ans)
{
var c=p[n][0], s1=s, i,j,k;
for (i=0; i<40; i++)
{
switch (c.substring(i,i+1))
{
case '1': r='c1'; break;
case '2': r='c2'; break;
case '3': r='c3'; break;
case '6': r='c6'; break;
case '9': r='c9'; break;
case '+': r='pl'; break;
case '-': r='mi'; break;
case '*': r='mu'; break;
case ':': r='di'; break;
case '=': r='eq'; break;
}
s1=s1.replace("#"+(i+1)+"#",r);
}
c=""; if(ans) c=p[n][1]; for (i=0; i<16; i++) {s1=s1.replace("%"+(i+1)+"%",c.substring(i,i+1));}
w(s1);
}
var p = [
['1962123932163223+:=---*+*=*:-:++=====-:=',' '],
['1962123932163223+:=---*+*=*:-:++=====-:=','4 12393 9 '],
['1962123932163223+:=---*+*=*:-:++=====-:=','4 6 123932169 2 '],
['1962123932163223+:=---*+*=*:-:++=====-:=','4862123932169323'],
];
w("<h1>ЗАМОЧКИ</h1>");
w("<h2>Пример</h2>");
w("<table border=0 cellpadding=0 cellspacing=20>");
for (i=0; i<4; i+=2) { w("<tr>"); for (j=0; j<2; j++) { w("<td>"); carpet(i+j,1); w("</td>"); } w("</tr><tr></tr>"); }
w("</table>");
p = [
['1962123932163223+:=---*+*=*:-:++=====-:=','4862123932169323'], //0
['1269291236111326:+=*++*+:=---:+-=====-*=','4268394356747536'], //1
['1326233129392612+:=-*+**-=---:+-=====*:=','7526335429382643'], //2
['6119213662211931:+=*++--*=:+:+:+=====+-=','8479313663244857'], //3
['1191623621196223*-=+-+++-=:+:--+=====:+=','4497835621786225'], //4
['9166312223116913*:=-+:*--=*++-*+=====:+=','9466512223178845'], //5
['3119326121391316-*=+-++*-=:+:-+*=====-+=','9748538721397546'], //6
['2319611936231126++=*++++-=:--:+:=====-*=','2349641936334126'], //7
['2111193232222613*-=++-*+:=::++-*=====+-=','2471785332223645'], //8
['3219119126613122*-=+++-*-=:-:++-=====+:=','5378449736813122'], //9
['1319621121313219-*=+++:--=:::+*-=====+-=','7548831434575219'], //10
['6393312292139619*-=-+-:+:=+**+:+=====-+=','6399512382159878'], //11
['1126293232312132-*=++*++:=::-:*-=====+-=','7426285233543452'], //12
['3336623931122931*-=+*-+:+=:-+:*-=====+-=','3596625831123957'], //13
['3113213221111362*-=+:-+*-=+++:*-=====+:=','3475245324447562'], //14
['9213211316211216:-=*+**+-=:-+-+-=====-+=','8213274546374378'], //15
['1232621121219211+:=*+-*:+=:-*--:=====+-=','4232621431218347'], //16
['3321112321622216+:=+-:-+-=::+**:=====-+=','5927412334623278'], //17
['1123932216621192-*=++--:+=:-+:*:=====+-=','7439992346834792'], //18
];
for (k=0; k<2; k++)
{
w("<h2>"+(k?"Ответы":"Задачи")+":</h2>");
w("<table border=0 cellpadding=0 cellspacing=20>");
for (i=1; i<19; i+=3) { w("<tr>"); for (j=0; j<3; j++) { w("<td><div>"+(i+j)+".</div>"); carpet(i+j,k); w("</td>"); } w("</tr><tr></tr>"); }
w("</table>");
}
</script>
</head>
<body>
<h2>Правила:</h2>
<table cellspacing=10>
<tr>
<td width=60 height=60 class=c1></td><td width=100>- 1,4,7 </td><td width=60 height=60 class=c2></td><td width=100>- 2,3 </td>
<td width=60 height=60 class=c3></td><td width=100>- 3,5,9 </td><td width=60 height=60 class=c9></td><td width=100>- 0,8,9 </td>
<td width=60 height=60 class=c6></td><td width=100>- 0,6,8 </td>
</tr>
</table>
<br>
<iframe src=html.htm width=100% height=50%>
</body>
</html>