Sovrapporre il testo ad un'immagine: non va

[mailandrea]

Salve a tutti.
Vorrei sovrapporre un testo scritto da un utente ad un'immagine caricata dal database.
Precisamente serve per un sito di quelli per personalizzare le t-shirt.

Ora, vengo al dunque.

L'utente sceglie la maglietta.
La visualizza.
Subito sotto ci sono dei campi come: TESTO, DIMENSIONE, FONT ecc...

Ora io vorrei che appena l'utente scrive che so, "ciao" e prema il tasto Anteprima, si veda subito il testo sovrappposto all'immagine.


questo è lo script che ho messo

<div id="tcontent6" class="tabcontent">
<script>
function createObject() {
var tipo_richiesta;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
tipo_richiesta = new ActiveXObject("Microsoft.XMLHTTP");
}else{
tipo_richiesta = new XMLHttpRequest();
}
return tipo_richiesta;
}

var http = createObject();

function carica(testo,font,dimcar,id) {
var par = window.parent.document;
var images = par.getElementById('dati');
var new_div = par.createElement('div');
var new_img = par.createElement('img');
new_img.src = 'indicator.gif';
new_div.appendChild(new_img);
images.appendChild(new_div);
http.open('get', 'html/a/caricatesto.php?testo='+testo+'&font='+font+'&dimcar='+dimcar+'&id='+id);
http.onreadystatechange = handleResponse;
http.send(null);
timedMsg();
}

function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('dati').innerHTML = response;
}
}
</script>


<div id="dati"></div>



TESTO: <input type="text" name="testo">


DIMENSIONE: <select size="1" name="dimcar">
    <option value="9">9pt</option>
    <option value="10">10pt</option>
    <option value="11">11pt</option>
    <option value="12">12pt</option>
    <option value="13">13pt</option>

    <option value="14">14pt</option>
    <option value="15">15pt</option>
    <option value="16">16pt</option>
    <option value="17">17pt</option>
    <option value="18">18pt</option>
    <option value="19">19pt</option>

    <option value="20">20pt</option>
    <option value="21">21pt</option>
    <option value="22">22pt</option>
    <option value="23">23pt</option>
    <option value="24">24pt</option>
    <option value="25">25pt</option>

    <option value="26">26pt</option>
    <option value="27">27pt</option>
    <option value="28">28pt</option>
    <option value="29">29pt</option>
    <option value="30">30pt</option>
    <option value="31">31pt</option>

    <option value="32">32pt</option>

    </select>


FONT: <select size="1" name="font">
    <option value="Verdana">Verdana</option>
    <option value="Arial">Arial</option>
    <option value="impact">impact</option>
    </select>


TAGLIA: <select size="1" name="taglie">
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
    <option value="XXL">XXL</option>
    </select>


Quantità: <INPUT TYPE="text" size = "2" name="quantity" maxlength="4" value="1">


<input type="button" value="invia" 

onclick="javascript:carica(document.theform.testo.value,document.theform.dimcar.options[0].value,document.theform.font.options[0].value);">

</div>