ちょっとまずかったかな〜。 - babu_babu

http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=2677
あとは、think49 さんに託すね ^^;
質問も回答も見ているとなぜだか、イライラするんだな。
こういう投げやりな気持ちではだめなんだろうか・・・。

- 追記

案の定、画像に変更したがっている。背景を画像にするだけなんだけど・・・
table::#hoge の中にいるのか確認していないので、テーブルが２箇所にあるとまずいよ！
製作時間は４０分くらい（？）で書いたのだけど、後半はグダグダになってきていたし
何より、本日の睡眠時間１時間３０分。ちょっと眠い。

<!DOCTYPE html>
<title></title>

<style type="text/css">
#hoge {
  border : 0px none;
  border-collapse: collapse;

}
#hoge td {
  boder : 0px none;
  width : 32px;
  height: 32px;
}
</style>

<body>
<form action="#">
  <p>
    x = <input type="text" name="sizex" value="25"><br>
    y = <input type="text" name="sizey" value="15"><br>
    <input type="button" name="make" value="Make Table">
  </p>
</form>

<hr>

<table id="hoge">
  <tr><td>&nbsp;
</table>

<script>
//@cc_on
var hogeArray;
var colorList = ['#888', '#eee', '#f88', '#8f8', '#88f', '#ff8', '#8ff', '#f8f'];

var alertTd = function (evt) {
  var mess = [ ];
  var x = this.cellIndex;
  var y = this.parentNode.rowIndex;
  mess.push ('Event:' + evt.type);
  mess.push ('x    :' + x);
  mess.push ('y    :' + y);
  this.style.backgroundColor = colorList[hogeArray[y][x] += hogeArray[y][x] < 8 ? 1: -8];
  alert (mess.join ('\n'));
}

var makeHogeTable = function () {
  var hoge, x, y, fg, tb, tr, td, ctr, ctd, ix, iy, ic;
  var doc = this.ownerDocument;
  var es = this.elements;

  if (hoge = doc.getElementById('hoge'), ! hoge) return;
  
  while (hoge.hasChildNodes ())
    hoge.removeChild (hoge.firstChild);
  
  fg = doc.createDocumentFragment ();
  tb = doc.createElement ('tbody');
  fg.appendChild (tb);
  tr = doc.createElement ('tr');
  td = doc.createElement ('td');
  td.appendChild (doc.createTextNode (''));
  
  hogeArray = [ ];
  x = es['sizex'].value |0;
  y = es['sizey'].value |0;
  
  if (x < 1 || y < 1) return;
  
  for (iy = 0; iy < y; iy++) {
    hogeArray[iy] = [];
    ctr = tr.cloneNode (false);
    ix = x;
    for (ix = 0; ix < x; ix++) {
      hogeArray[iy][ix] = ic = (iy&1)^(ix&1) * 1;
      ctd = td.cloneNode (true);
      ctd.style.backgroundColor = colorList[ic];
      ctr.appendChild (ctd);
    }
    tb.appendChild (ctr);
  }
  hoge.appendChild (fg);
}

var clickHandler = function (evt) {
  var n = evt./*@if(1) srcElement @else@*/ target /*@end@*/;
  
  if ('make' === n.name)
    makeHogeTable.call (n.form);
  
  if ('TD' === n.nodeName) {
    alertTd.call (n, evt);
  }
    
};

var mouseoverHandler = function (evt) {
  var n = evt./*@if(1) srcElement @else@*/ target /*@end@*/;
  var x, y;
  
  if ('TD' === n.nodeName) {
    x = n.cellIndex;
    y = n.parentNode.rowIndex;
    n.style.backgroundColor = colorList[hogeArray[y][x] += hogeArray[y][x] < 8 ? 1: -8];
  }

}

document./*@if(1) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/ 'click', clickHandler, false );
document./*@if(1) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/ 'mouseover', mouseoverHandler, false );

</script>

追記。
その後、希望に近いものと思われるものを難読化(?)して書いてみた。

<!DOCTYPE html>
<title></title>

<style type="text/css">
#hoge {
  border : 0px none;
  border-collapse: collapse;
}
#hoge tr td {
  padding : 0;
}
#hoge tr td img {
  vertical-align: top;
}
</style>

<body>
<form action="#">
  <p>
    x = <input type="text" name="sizex" value="10"><br>
    y = <input type="text" name="sizey" value="10"><br>
    <input type="button" name="make" value="Make Table"> /
    <input type="button" name="mode" value="Change Mode">
  </p>
</form>

<hr>

<table id="hoge">
  <tr><td>&nbsp;
</table>

<script>
//@cc_on
var size = 600;
var mode = 0;
var scale = 0;
var map;
var imageList = [
  ['0.gif', '1.gif', '2.gif', '3.gif', '4.gif', '5.gif'],
  ['0b.gif', '1b.gif', '2b.gif', '3b.gif', '4.gif', '5b.gif']
];

var makeHogeTable = function (f) {
  var hoge, x, y, fg, tb, tr, td, img, ctr, ctd, cimg, ix, iy, ic, sx, sy;
  var doc = this.ownerDocument, es = this.elements;

  if (hoge = doc.getElementById('hoge'), ! hoge) return;
  
  while (hoge.hasChildNodes ())
    hoge.removeChild (hoge.firstChild);
  
  fg = doc.createDocumentFragment ();
  tb = doc.createElement ('tbody');
  fg.appendChild (tb);
  tr = doc.createElement ('tr');
  td = doc.createElement ('td');
  img = doc.createElement ('img');
  td.appendChild (img);
  
  f || (map = [ ]);
  img.width = (sx = size / (x = +es['sizex'].value) |0) + '';
  img.height = (sy = size / (y = +es['sizey'].value) |0) + '';
  img.alt = '';
  if (x < 1 || y < 1) return;
  scale = (sx > 63) * 1;
  
  for (iy = 0; iy < y; iy++) {
    f || (map[iy] = []);
    ctr = tr.cloneNode (false);
    for (ix = 0; ix < x; ix++) {
      ic = f ? map[iy][ix]: (map[iy][ix] = (iy^ix)&1);
      ctd = td.cloneNode (true);
      ctd.firstChild.src = getImage(ix,iy);
      ctr.appendChild (ctd);
    }
    tb.appendChild (ctr);
  }
  hoge.appendChild (fg);
}


var handler = function (evt) {
  var t, n, x, y;
  n = evt./*@if(1) srcElement @else@*/ target /*@end@*/;
  switch (evt.type) {
  case 'mouseover' :
    if ('IMG' === n.nodeName && 'TD' === (t = n.parentNode).nodeName) {
      x = t.cellIndex;
      y = t.parentNode.rowIndex;
      map[y][x] = !map[y][x];
      n.src = getImage(x,y);
    }
    break;
  
  case 'click' : default :
    if ('make' === n.name)
      (mode = 0), makeHogeTable.call (n.form);

    if ('mode' === n.name)
      (mode = mode ? 0: 2), makeHogeTable.call (n.form, true);
    
    if ('IMG' === n.nodeName && 'TD' === (t = n.parentNode).nodeName) {
      x = t.cellIndex;
      y = t.parentNode.rowIndex;
      map[y][x] = !map[y][x];
      n.src = getImage (x,y);
    }
    break;
  }
};

var getImage = function (x, y) {
   return './img/' + imageList[scale][(map[y][x])+mode];
}

document./*@if (1) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/ 'click', handler, false );
document./*@if (1) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/ 'mouseover', handler, false );
</script>