Como escribir en un formulario mediante links de imágenes?

[ZiTAL]

Código HTML:

<table class="tabla" style="border: 0px">
<tbody>
  <tr align="center" valign="middle" class="color cont">
    <td>
      <div align="center"><span title="rojo">MAN-02</span></div>
    </td>
    <td>
      <div align="center"><span title="amarillo">AMAR</span></div>
    </td>
    <td>
      <div align="center"><span title="caramelo">CAF-2</span></div>
    </td>
    <td>
      <div align="center"><span title="negro">NEGRO</span></div>
    </td>
    <td>
      <div align="center"><span title="rojo">ROJO</span></div>
    </td>
  </tr>
  <tr align="center" valign="middle" class="color cont">
    <td>
      <div align="center"><img src="/images/stories/manchester2.jpg" title="rojo" /></div>
    </td>
    <td>
      <div align="center"><img src="/images/stories/amarillo2.jpg" title="rojo" /></div>
    </td>
    <td>
      <div align="center"><img src="/images/stories/caramelo%202.jpg" title="caramelo" /></div>
    </td>
    <td>
      <div align="center"><img src="/images/stories/negro%202.jpg" title="negro" /></div>
    </td>
    <td>
      <div align="center"><img src="/images/stories/rojo.jpg" title="rojo" /></div>
    </td>
  </tr>
</tbody>
</table>
<input type="text name="textfield" id="textfield" value="" />
 

Código Javascript:

<script type="text/javascript">
<!--
$(document).ready(function()
{
  var tmp = [];
  var parent = $('table > tbody > td');
  var items = $('img, span', parent);
  var textfield = $('#textfield');
 
  items.click(function(e)
  {
    var title = $(this).attr('title');
    if(tmp.length==0)
    {
      tmp[0] = title;
      tmp[1] = '';
    }
    else
    {
      tmp[1] = tmp[0];
      tmp[0] = title;
    }
    textfield.val(tmp[0]+" "+tmp[1])
  });
});
//-->
</script>