Pegando valores Xy de variáveis

O projeto
Eu preciso imprimir carteirinhas, mas como cada cliente tem campos diferentes e layout diferente de crachá tive a ideia de criar algo que o cliente pelo menos possa adicionar os campos(Variáveis: $nome, $telefone, $endereço, ...,...) E tivesse a possibilidade de posicionar cada variável no layout do cracha.


Na teoria como ira funcionar?!
1º) Envio da imagem de fundo da carteirinha com o layout e posições dos nomes definidos na imagem JPG.
2º) Terá uma div exatamente com o tamanho da carteirinha, a qual será a guia para pegar as posições XY.
3º) Ao lado da Div teria uma lista de variáveis que pode adicionar como $nome, $telefone, $endereço, ..., ...
4º) quando salvar os valores das var vão para o bd para que quando for imprimir as carteirinhas já fiquem no lugar certo.


O que preciso que seja feito
- Somente adicionar as variáveis.
- Obter o xy de cada e enviar para o bd (acredito que seja melhor: var:x,y) ou seja nome:30,20-endereco:55,60-...,...


Exemplo
- http://jsfiddle.net/Zpq3D/2/



Posso estar pensando errado, por isso aceito sugestões.