November 26
Un effetto JavaScript immagine rollover è ideale per mantenere le informazioni nascoste fino a quando il lettore lo richiede - per esempio, per nascondere la risposta ad una domanda fino a quando il lettore si muove il suo pulsante del mouse su di esso - o per la visualizzazione di sequenze in un prima e dopo singola immagine - per esempio, per mostrare una regione prima che si verifichi un diluvio e poi invitare il lettore a Passa sopra l'immagine per vedere la stessa regione dopo che si verifica un diluvio. Ottenere un'immagine in sostituzione di un'altra su un rollover utilizzando JavaScript è un semplice processo in due fasi.
1 Aprire il file HTML corrispondente alla pagina in cui si desidera inserire l'effetto di immagine rollover JavaScript e trovare il tag "<head>". Il tag "<head>" deve essere posizionato vicino alla parte superiore del file HTML.
2 Inserire il seguente codice nel file HTML immediatamente dopo il tag "<head>": <script type = "text / javascript">. Questo segnali di codice per il browser web che ciò che segue è un pezzo di codice JavaScript.
3 Inserire il seguente codice sotto la "<script type =" text / javascript ">" intestazione: la funzione mouseOver (). Premere il tasto "Invio" o "Return" per iniziare una nuova riga.
4 Inserire il codice seguente: {document.getElementById ( "immagine") src = "secondImage.jpg".}. Sostituire "secondImage.jpg" con il nome del file per l'immagine che andrà a sostituire l'immagine iniziale quando il lettore muove il cursore del mouse su di esso.
5 Inserire il seguente codice in una nuova riga: funzione mouseOut (). Premere il tasto "Invio" o "Return" per iniziare una nuova riga.
6 Inserire il codice seguente: {document.getElementById ( "immagine") src = "initialImage.jpg".}. Sostituire "initialImage.jpg" con il nome del file per l'immagine originale che verrà visualizzato prima che il lettore muove il cursore del mouse sopra l'immagine e che riapparirà dopo che il lettore si toglie il cursore del mouse da sopra l'immagine.
7 Enter "</ script>" su una nuova linea per porre fine a questa sezione di codice JavaScript.
8 Trova la posizione in cui si desidera inserire il codice di rollover JavaScript all'interno del tag "<body>" del file HTML.
9 Inserire il seguente codice nel file HTML: <border = "0" id = "image" img onmouseover = "mouseOver ()" onmouseout = "mouseOut ()" />.
10 Sostituire il testo "initialImage.jpg" con il nome del file per l'immagine che si desidera avere visualizzato prima il lettore muove il cursore del mouse sopra l'immagine.
11 Salvare il documento HTML e testarlo aprendolo in un browser Web per vedere come apparirà ai lettori che accedono attraverso Internet.