Come cambiare la dimensione dell'immagine con OnMouseOver

July 20

Quando si esegue un sito web, si ha il controllo totale sul layout, compresa la combinazione di colori, dove posizionare testo e immagini e come grande per rendere il font e le immagini. Se si dispone di una galleria di immagini, può essere utile per l'utilizzo di JavaScript per creare un'immagine più piccola o più grande quando si posiziona il mouse su di esso utilizzando l'opzione onMouseOver. È inoltre possibile utilizzare l'opzione onMouseOver per mostrare un'immagine diversa quando si posiziona il mouse sopra l'immagine per l'attenzione supplementare.

istruzione

1 Aprire il documento HTML che si desidera utilizzare l'effetto onMouseOver su in un editor di testo, come Blocco note.

2 Incollare il codice seguente tra i "<HEAD>" e "</ head>" tag:

<Script language = "javascript">

<! - Nasconde lo script ai vecchi browser

// Rilevare il browser:

browserName = navigator.appName;

browserVer = parseInt (navigator.appVersion);

if (browserName == "Netscape" && browserVer> = 3) browserVer = "1";

else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1";

altro browserVer = "2";

// Precaricare le immagini:

if (browserVer == 1) {

a1 = nuova immagine (107,36);

a1.src = "a1.jpg";

a2 = nuova immagine (107,36);

a2.src = "a2.jpg";

}

// Funzione di scambio d'immagini:

funzionare HiLite (imgDocID, imgObjName, commentare) {

if (browserVer == 1) {

document.images [imgDocID] .src = eval (imgObjName + ".src");

window.status = commento; return true;

}}

// End nascondersi ->

</ Script>

3 Individuare le linee con il seguente:

"A1 = nuova immagine (107,36)

a1.src = "a1.jpg";

"A1" è il nome della nuova immagine, mentre "nuova immagine" è la vostra descrizione. Il "107,36" definiscono la larghezza e l'altezza dell'immagine. Inserire la fonte per l'immagine originale nella seconda riga. Posizionare il percorso completo dell'immagine tra virgolette, compresa la cartella si trova in ed estensione.

4 Modificare le seguenti due righe di codice:

a2 = nuova immagine (107,36);

a2.src = "a2.jpg";

Digitare il nome per la nuova immagine per "A2", e identificare le dimensioni che si desidera utilizzare per l'immagine quando si posiziona il mouse su di esso. Dal momento che si desidera utilizzare la stessa immagine per entrambi, ma vuole aumentare le sue dimensioni al passaggio del mouse, usare lo stesso percorso utilizzato per "A1", ma cambiare le dimensioni dei pixel in modo appropriato.

5 Inserire il codice seguente nella parte di "<body>" del documento HTML:

<Img name = "a" border = 0 width = 107 height = 36 onMouseOver = "HiLite ( 'a', 'A2', 'il tuo commento qui')" onMouseOut = "HiLite ( 'a', 'A1', ' ') "> </a>

Digitare il percorso della vostra immagine nella porzione di codice "tag. La" onMouseOut "funzione ritorna l'immagine torna alla sua dimensione originale quando si sposta il mouse fuori l'immagine. Sostituire tutte le istanze di" A1 "o" A2 "con la vostra immagine il nome del file.