September 22
Una delle entità HTML più utili è il blocco DIV. Esso consente agli sviluppatori ai pulsanti di gruppo, menu e altri controlli in una pagina Web. JavaScript rende possibile per una pagina di alterare il suo aspetto modificando il contenuto in qualsiasi blocco DIV. Questi cambiamenti appaiono istantaneamente e possono impressionare i visitatori del sito mentre guardano il cambiamento del testo in immagini o link appaiono dal nulla.
1 Avviare Blocco note o un editor HTML.
2 Aprire uno dei tuoi documenti HTML, e aggiungere il seguente codice blocco DIV ovunque dopo il primo tag <body>:
<Div id = "TestDiv"> <h1> Questa è un'intestazione </ h1>
</ Div>
<Input type = valore "pulsante" = "modificare il contenuto di un'immagine" onclick = "tornare Change_to_Image ()" />
<Input type = valore "pulsante" = "modificare il contenuto di un link" onclick = "return Change_to_Link ()" />
Questo crea un DIV cui ID è TestDIV. Il DIV contiene un'intestazione e due pulsanti. Il primo pulsante provoca intestazione del DIV per modificare un'immagine. Il secondo pulsante cambia tutto all'interno del DIV per un collegamento. I pulsanti farlo chiamando funzioni JavaScript che alterano il contenuto del DIV.
3 Aggiungere questo codice JavaScript alla sezione capo del documento:
<Script language = tipo "javascript" = "text / javascript">
Funzione Change_to_Image () {
var divObject = document.getElementById ( "TestDiv");
var newContent = '<img />';
divObject.innerHTML = newContent;
}
funzione Change_to_Link () {
var divObject = document.getElementById ( "TestDiv");
var newContent = '<a href="Visit"> http://www.whitehouse.gov "> Visita Casa Bianca Sito </a>';
divObject.innerHTML = newContent;
}
</ Script>
Si noti il valore della newContent nella funzione Change_to_Image. Tale valore è una dichiarazione HTML che definisce un'immagine. In questo esempio, il nome di tale immagine è TestImage.jpg.
4 Sostituire "TestImage.jpg" con il nome di un'immagine sul disco rigido. Per esempio, se si dispone di un'immagine denominata flowers.gif in una cartella denominata "Nature" sull'unità "C", impostare il valore per newContent come segue:
var newContent = '<img />';
Se l'immagine è sul Web, utilizzare l'URL dell'immagine. La variabile divObject contiene un riferimento alla DIV definito nella sezione Corpo. L'ultima riga nella funzione imposta che la proprietà innerHTML di DIV al valore del newContent. Dal momento che i punti newContent a un'immagine, cambiano i contenuti del DIV a quell'immagine quando questa funzione viene eseguito.
5 Rivedere la seconda funzione, denominata Change_to_Link. Questa funzione è simile alla funzione precedente. L'unica differenza si verifica sulla linea due della funzione. Il codice imposta il valore di newContent ad una definizione tag di ancoraggio. Tale definizione definisce un link al sito web della Casa Bianca.
6 Salvare il documento HTML. Aprire nel browser. La pagina Web visualizza l'intestazione ei due pulsanti creati nei passaggi precedenti.
7 Fare clic su "Cambia contenuti ad un tasto di immagine". La voce si trasforma in un'immagine.
8 Fare clic su "Cambia contenuti di un link" pulsante. L'immagine cambia a un link. Clicca sul link. Il browser naviga sul sito web della Casa Bianca.