Metodo getElementById () di JavaScript consente ai programmatori di controllare e modificare l'impianto idraulico interno di una pagina Web. Questo metodo ha accesso all'interfaccia di programmazione di una pagina web denominata il Document Object Model o Dom. Con getElementById (), il programmatore può modificare la maggior parte delle informazioni di tag stile HTML (HyperText Markup Language)--tra cui immagini di sfondo. Il JavaScript evento funzioni onMouseOver() e onMouseOut() rispondere al movimento del mouse sugli elementi HTML avviando l'esecuzione di istruzioni JavaScript. I tag HTML devono essere etichettati con un ID univoco, quindi il metodo getElementById () può trovare e modificarli.

Istruzioni

1

Avviare l'editor di testo che è venuto con il computer.

2

Immettere il seguente codice nell'editor di testo. Sostituire i nomi di immagine "image1. jpg" e "image2.jpg" con i nomi e il formato dei file di immagine di sfondo. Regolare le dimensioni delle immagini nel foglio di stile CSS anche "mydiv".

< html >

< head >

< style type = "text/css" ><!...

.myDiv () {

immagine di sfondo: URL(image2.jpg);

Larghezza: 100px;

Altezza: 20px;

colore: bianco;

margin-bottom: 2px;

}

--> < / stile >

< script type = "text/javascript" >

funzione changeimage(linknumber)

{

var linktochange = "mydiv" + linknumber;

document.getElementById(linktochange).style.backgroundImage="URL('image1.jpg')";

}

funzione changeimageback(linknumber)

{

var linktochange = "mydiv" + linknumber;

document.getElementById(linktochange).style.backgroundImage="URL('image2.jpg')";

}

< / script >

< / head >

< corpo >

< div id = "mydiv1" class = "mydiv" onMouseOver="changeimage('1');" onMouseOut="changeimageback('1')" >< un href = "" > Link 1 < /a >< / div >

< div id = "mydiv2" class = "mydiv" onMouseOver="changeimage('2');" onMouseOut="changeimageback('2')" >< un href = "" > Link 2 < /a >< / div >

< div id = "mydiv3" class = "mydiv" onMouseOver="changeimage('3');" onMouseOut="changeimageback('3')" >< un href = "" > Link 3 < /a >< / div >

< div id = "mydiv4" class = "mydiv" onMouseOver="changeimage('4');" onMouseOut="changeimageback('4')" >< un href = "" > Link 4 < /a >< / div >

< / body >

< / html >

3

Fare clic su "File" "Salva". Salva con nome "test. html."

4

Avviare il browser. Fare clic su "File", "Apri File".

5

Individuare e aprire il file "test. html" appena creato.

6

Spostare il puntatore del mouse sopra il link per verificare il cambiamento di immagine di sfondo.

Consigli & Avvertenze

• L'evento di OnMouseOver() può essere utilizzato per creare i popup contestuali. Il visitatore del sito si sposta il puntatore del mouse su una parola o un'immagine e innesca un pop-up, che fornisce ulteriori informazioni relazionati a quella determinata parola o immagine. Il codice seguente è un esempio semplice con un avviso di JavaScript.
• < html >
• < head >
• < script type = "text/javascript" >
• funzione mypopup()
• {
• Alert (' è inoltre possibile aggiungere un popup which\n carica una pagina web, but\n ricordare che \nbrowser qualche utente di s potrebbero non consentire i pop-up.');
• }
• < / script >
• < / head >
• < corpo >
• < h1 > Sposta il mouse sopra la parola * < span onmouseover="mypopup();" > qui < / span > * < / h1 >
• < / body >
• < / html >
• I principali browser visualizzerà talvolta valido codice HTML e CSS in modo diverso. Alcuni formati..--di immagine come PNG (Portable Network Graphics) o SVG (Scalable Vector Graphics), potrebbe essere visualizzato in modo non corretto o non è affatto. Formati di immagine JPEG e gif funzionano bene con la maggior parte dei browser e dovrebbero essere usati se possibile. Sempre testare il codice su diversi browser e le versioni precedenti dello stesso browser al fine di garantire che il codice funziona come previsto.