JavaScript aggiunge potenti funzionalità dinamiche di codice HTML. Contenuto può essere aggiunto o rimosso dalla tua pagina Web dal codice JavaScript, anche dopo averlo caricato. Scrivere una funzione per creare un elemento div che contiene un'immagine e la didascalia, quindi aggiungerlo alla tua pagina in modo immediato. Chiamare questa funzione in risposta all'input agli utenti di visualizzare l'immagine che essi desiderano. Espandere su questo codice per creare un database di foto o una presentazione.

Istruzioni

1

Inserire il seguente codice tra i tag di "head" del documento HTML:

< script type = "text/javascript" >

Function insertImage(src,caption,parent) () {

parent = document.getElementById(parent);

var span = document.createElement("span")

span.style.display = "inline-block";

span.style.fontSize = "80%";

span.style.textAlign = "center";

span.innerHTML = "<img src='" + src + "' />" + caption;

parent.appendChild(span);

}

< / script >

Modificare la dimensione e l'allineamento della didascalia modificando i comandi di assegnazione "fontSize" e "textAlign" di proprietà, se lo si desidera.

2

Aggiungere il seguente codice al corpo del documento HTML, sostituendo il percorso e il nome del file immagine "immagine. JPG"e la didascalia per" didascalia: "

< input type = "button" valore = "Aggiungi immagine" onClick = "insertImage('IMAGE. JPG', 'Didascalia', 'imagelocation'); "/ >

< span id = "imagelocation" >< / span >

3

Salvare la pagina e caricarlo in un browser Web. Fare clic sul pulsante e l'immagine viene visualizzata con la didascalia. La posizione dell'immagine è la stessa come l'intervallo vuoto con l'ID "imagelocation." È possibile aggiungere più si estende, ciascuna con il proprio ID, per aggiungere più immagini in posizioni diverse sulla pagina con la funzione di "insertImage". Chiamare "insertImage" ogni volta che ti piace da elementi di input utente o altre funzioni di JavaScript.