For users to be able to type in their own name you'll need a text field. You'll also need a button that fires a Javascript function that checks the value of the text field and renders the letter images.
You can use the following code to create the letters. You will need a textfield with the id 'textfield' and a div to render the results in with the id 'output', which ofcourse you can change. I recommend using a select element to store the pattern options (#patternChooser in this example)
function renderName()
{
// Get the name to be rendered and the chosen pattern
var text = document.getElementById('textfield').value;
var pattern = document.getElementById('patternChooser').value;
// Iterate over the name and create an element for each letter
for(i = 0; i < text.length; i++)
{
var letter = document.createElement('div');
letter.style.backgroundImage = 'url(' + pattern + '_' + text[i] + ')';
document.getElementById('output').appendChild(letter);
}
}
You can use the following CSS to apply some positioning to the letters (adjust the with and height to that of your images):
#output div
{
margin-left: 10px;
width: 50px;
height: 100px;
float: left;
}
You will need to name your images like this: flowerpattern_a.png, brickpattern_j.png, etc.
If you want the letters to appear real time you can use Javascript's onkeyup() to fire a function that checks the last character of the text field's value and creates an element for it.
Sprites
You can also use a sprite to increase performance. Put all the images for the letters into one image. You set this image as a background for every letter.
Quick read on CSS sprites: http://css-tricks.com/css-sprites/
You can add background-image: url(sprite.png); to the CSS snippet above.
Instead of just setting a backgroundImage with Javascript, you will need to set the background position of the letter (letter.style.background-position = '100px 200px')
Font embedding
If you got fonts to use: there are many font embedding options like Typeface and Cufon. The one I find most pleasant to work with is the use of font-face. It is fast and the text will behave like any other text.
If you got your .TTF Truetype font, you'll need to convert the font to .EOT for use with Internet Explorer. You could also add SVG fonts for full browser coverage. It's actually very easy: You just add the following snippet to the top of your stylesheet like this:
@font-face {
font-family: 'GothicCustom';
src: url("LeagueGothic.eot");
src: local('League Gothic'),
url("LeagueGothic.svg#lg") format('svg'),
url("LeagueGothic.otf") format('opentype');
}
The advantage of this technique is that it's easy to use and you got full controll over the rendered text, like any other text on your website. You can set the font-size, letter-spacing etc. Here's a good read about font-face font embedding.
You can use Microsoft WEFT or TTF2EOT to create .EOT fonts.
For example, your code could look like this.
Javascript
function renderName()
{
// Get the name to be rendered and the chosen pattern
var text = document.getElementById('textfield').value;
var pattern = document.getElementById('patternChooser').value;
// Render the text with a class
for(i = 0; i < text.length; i++)
{
var output = document.getElementById('output');
output.style.fontFamily = pattern;
output.innerHTML = text;
}
}
HTML
<form>
<input id="textfield" type="text" />
<select id="patternChooser">
<option>Flowers</option>
<option>Brick</option>
<option>Decorative</option>
</select>
<input type="button" onclick="renderName()" />
</form>
<div id="output"></div>
CSS
@font-face {
font-family: 'Decorative';
src: url("decorative.eot");
src: local('Decorative'),
url("Decorative.svg#lg") format('svg'),
url("Decorative.otf") format('opentype');
}
Now the only thing that is left is converting the fonts and import them in your stylesheet.
Ofcourse you can choose to go with any other font-embedding method. Here's an article about font-embedding options but a quick Google will show you the options as well.
< this is one of the letter cutouts (difficult to see!)
and one of the background patterns.