pulsanti sito web contenente le immagini che cambiano al passaggio del mouse forniscono i visitatori con un'esperienza più dinamica. Hanno anche inviare un'istruzione sottile per fare clic sul pulsante. Scegli il tuo normale pulsante-stato e quello che verrà visualizzata quando un utente passa sopra il pulsante. Utilizzare HTML e JavaScript per ottenere questo risultato utile aggiunta alla pagina Web.

istruzione

1 Aprire un editor di testo o HTML e inserire il seguente:

<Script type = "text / javascript">

<! -

var roArray = new Array ();

Funzione setrollover (overimg, docImgName)

{

se il ritorno (document.images!);

if (docImgName == null)

docImgName = document.images[document.images.length-1].name;

roArray [docImgName] = new Object;

roArray [docImgName] .overImage = nuova immagine;

roArray [docImgName] .overImage.src = overimg;

}

funzione di rollover (docImgName)

{

se il ritorno (document.images!);

se il ritorno (roArray [docImgName]!);

if (! roArray [docImgName] .outImage)

{

roArray [docImgName] .outImage = nuova immagine;

roArray [docImgName] .outImage.src = document.images [docImgName] .src;

}

document.images [docImgName] .src = roArray [docImgName] .overImage.src;

}

funzione di rollout (docImgName)

{

se il ritorno (document.images!);

se il ritorno (roArray [docImgName]!);

document.images [docImgName] .src = roArray [docImgName] .outImage.src;

}

// ->

</ SCRIPT>

2 Individuare l'area per il pulsante e inserire il seguente:

<A

HREF="mydoc.html"

onMouseOver = "rollover ( 'myimage')"

onMouseOut = "rollout ( 'myimage')"

> & Lt; IMG

SRC = "mainbutton.jpg"

NAME = "myimage"

ALT = "Home Page" BORDER = 0

HEIGHT = 130 WIDTH = 115

> & Lt; / A>

<Script type = "text / javascript">

<! -

setrollover ( "overbutton.jpg", "myimage");

// ->

</ SCRIPT>

Sostituire "mydoc.html" con il nome del file. Sostituire "mainbutton.jpg" e "overbutton.jpg" con i nomi delle immagini dei vostri principali e mouseover pulsanti rispettivamente.

3 Salvare il file. Assicurarsi che esistono le immagini nella stessa directory del documento HTML o nel percorso dato nel vostro "SRC" e "setrollover" attributi. Prova facendo doppio clic sul file sul vostro sistema.