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

[chemanuca]

Hola a todos amigos!! Espero que estén bien...

Tengo la siguiente consulta:

Tengo un "menu" conformado de tres pestañas en jQuery, en las que tengo una tabla para cada pestaña con contenidos (imágenes)...

Ejemplo de la tabla:

Código HTML:

<table class="tabla" border="0">
                         <tbody>
                           <tr align="center" valign="middle" class="color cont">
                             <td>
                               <div align="center">MAN-02</div>
                             </td>
                             <td>
                               <div align="center">AMAR</div>
                             </td>
                             <td>
                               <div align="center">CAF-2</div>
                             </td>
                             <td>
                               <div align="center">NEGRO</div>
                             </td>
                             <td>
                               <div align="center">ROJO</div>
                             </td>
                           </tr>
                           
                           <tr align="center" valign="middle" class="color cont">
                             <td>
                               <div align="center"><img src="/images/stories/manchester2.jpg" height="95" width="56"></div>
                             </td>
                             <td>
                               <div align="center"><img src="/images/stories/amarillo2.jpg" height="95" width="56"></div>
                             </td>
                             <td>
                               <div align="center"><img src="/images/stories/caramelo%202.jpg" height="95" width="56"></div>
                             </td>
                             <td>
                               <div align="center"><img src="/images/stories/negro%202.jpg" height="95" width="56"></div>
                             </td>
                             <td>
                               <div align="center"><img src="/images/stories/rojo.jpg" height="95" width="56"></div>
                             </td>
                           </tr>
                          </tbody>
                        </table> 

Mi problema es:
Abajo de este "menu" tengo un form texfield, en el que quiero: Cuando se haga Click a la imagen o texto; este se añada con atributos como:

Color: $elcolor, otro Color: $Elotrocolor

Un atributo por cada pestaña. Pero que a la vez, si se vuelve a hacer click en una de las primeras pestañas, y se vuelve a elegir un color, no se aumente, sino que se sobreescriba en la posición debida, algo como:

Color: $elnuevocolor, otro Color: $Elotronuevocolor

Alguna función quizás?? Ayuda, por favor!! :D

Gracias de antemano por sus respuestas :)

[ZiTAL]

A ver tienes un:

Código HTML:

<input type="text" value=""/>
 

y quieres que se le añadan atributos? o el valor del mismo, ejemplo:

quiere esto o:

Código HTML:

<input type="text" value="" color="#fff" otrocolor="#000"/>
 

o esto:

Código HTML:

<input type="text" value="color=\"#fff\" otrocolor=\"#000\"" />
 

te comento porque no se deben usar atributos que no existen

[chemanuca]

Iniciado por ZiTAL

A ver tienes un:

Código HTML:

<input type="text" value=""/>
 

y quieres que se le añadan atributos? o el valor del mismo, ejemplo:

quiere esto o:

Código HTML:

<input type="text" value="" color="#fff" otrocolor="#000"/>
 

o esto:

Código HTML:

<input type="text" value="color=\"#fff\" otrocolor=\"#000\"" />
 

te comento porque no se deben usar atributos que no existen

gracias por tu respuesta; quisiera que sea algo como:

Código HTML:

<input type="text" value="$elcolorquevaria1, $elcolorquevaria2">
 

Y así, ya que estos colores se definen por algún identificador ubicado en los links (que aún no sabría que ponerle), y como digo, no se como crear esta funcion :(

Ayudame por favor :D

[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>
 

[chemanuca]

Iniciado por 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>
 

Perdón por mi ignorancia; ya lo he checado, (al parecer faltaba una comilla), pero aún así, no me funciona; ya que el textfield no es rellenado; al parecer no son links... Alguna idea??

Si lo deseas, te podría enviar todos los archivos por si faltara algo :S

En sí, son tres pestañas de imagenes y nombres, de donde se tiene que sacar tres colores; uno por pestaña (pestañas en jQuery)

Muchas gracias por tu ayuda :D