IL CODICE HTML Unimmagine regolare funzionante come un

  • Slides: 28
Download presentation
IL CODICE HTML

IL CODICE HTML

Un'immagine regolare funzionante come un bottone -link appare in questa maniera nel codice HTML:

Un'immagine regolare funzionante come un bottone -link appare in questa maniera nel codice HTML:

<a href="mypage. htm"> <Img Src="button 1 a. gif"> </a>

<a href="mypage. htm"> <Img Src="button 1 a. gif"> </a>

Per rendere possibile a javascript di cambiare l'immagine, dobbiamo darle un nome che verrà

Per rendere possibile a javascript di cambiare l'immagine, dobbiamo darle un nome che verrà utilizzato da javascript come riferimento. Nel nostro caso, ecco come apparirà l'HTML

<a href="mypage. htm"> <Img Src="button 1 a. gif" name="button 1"> </a>

<a href="mypage. htm"> <Img Src="button 1 a. gif" name="button 1"> </a>

Ora il bottone ha un nome che sarà usato come riferimento quando vorremo che

Ora il bottone ha un nome che sarà usato come riferimento quando vorremo che javascript lo sostituisca con un'altra immagine.

Dobbiamo dire al browser che dovrà eseguire una funzione in grado di sostiutire l'immagine,

Dobbiamo dire al browser che dovrà eseguire una funzione in grado di sostiutire l'immagine, quando il mouse verrà fatto scorrere sull'immagine.

Questo si ottiene con l' evento onmouse. Over.

Questo si ottiene con l' evento onmouse. Over.

In più dobbiamo anche dire al browser che quando il mouse viene fatto scorrere

In più dobbiamo anche dire al browser che quando il mouse viene fatto scorrere fuori dall'area del bottone, entrerà in gioco un altro javascript per ripristinare l'immagine iniziale.

Questo si ottiene con l'evento onmouse. Out.

Questo si ottiene con l'evento onmouse. Out.

Il codice completo HTML sarà dunque:

Il codice completo HTML sarà dunque:

<a href="mypage. htm" onmouse. Over="Mouse. Over. Routi ne('button 1')" onmouse. Out="Mouse. Out. Routine ('button

<a href="mypage. htm" onmouse. Over="Mouse. Over. Routi ne('button 1')" onmouse. Out="Mouse. Out. Routine ('button 1')"> <Img Src="button 1 a. gif" name="button 1" ></a>

Questo è tutto quello che c'è da fare per quanto riguarda la parte HTML

Questo è tutto quello che c'è da fare per quanto riguarda la parte HTML della pagina. Il resto viene fatto con javascript.

Nota: Gli eventi-mouse si aggiungono al tag <a href> - NON al tag image.

Nota: Gli eventi-mouse si aggiungono al tag <a href> - NON al tag image. Questo perché i browser non cercano eventi di tipo mouseover sulle immagini. Anche se sembra stupido, è vero. Perciò si possono animare le immagini soltanto quando queste funzionano come links. Siccome i browser accettano gli eventi mouseover soltanto sui link, registreranno un evento riguardante il mouse su un'immagine, se l'immagine è un link.

IL CODICE JAVASCRIPT

IL CODICE JAVASCRIPT

Il javascript che segue va inserito nell sezione "head" della tua pagina web.

Il javascript che segue va inserito nell sezione "head" della tua pagina web.

<Script> <!-// La riga precedente nasconde il programma ai // vecchi browser che non

<Script> <!-// La riga precedente nasconde il programma ai // vecchi browser che non riescono ad intrepretarlo

// Assumendo che l'immagine del "bottone su" si chiami "button 1 a. gif" //

// Assumendo che l'immagine del "bottone su" si chiami "button 1 a. gif" // E che l'immagine del "bottone giù" si chiami "button 1 b. gif" // Possiamo leggere queste due immagini come variabili // chiamate button 1 up e button 1 down.

button 1 up = new Image; button 1 up. src = "button 1 a.

button 1 up = new Image; button 1 up. src = "button 1 a. gif"; button 1 down = new Image; button 1 down. src = "button 1 b. gif"; // Ora le due immagini sono definite

// Il passo successivo riguarda le due funzioni che occorrono. // La prima funzione

// Il passo successivo riguarda le due funzioni che occorrono. // La prima funzione si chiama Mouse. Over. Routine, // e fa passare da button 1 up a button 1 down.

function Mouse. Over. Routine(Button. Name) { if (Button. Name=="button 1") {document. button 1. src

function Mouse. Over. Routine(Button. Name) { if (Button. Name=="button 1") {document. button 1. src = button 1 down. src; } }

// Ora il nostro bottone passerà da button 1 up a button 1 down

// Ora il nostro bottone passerà da button 1 up a button 1 down // quando si presenterà un evento mouseover. // Per completare il programma dovremo soltanto // inserire la funzione inversa, che farà l'esatto contrario // quando si presentrerà un evento mouseout.

function Mouse. Out. Routine(Button. Name) { if (Button. Name=="button 1") {document. button 1. src

function Mouse. Out. Routine(Button. Name) { if (Button. Name=="button 1") {document. button 1. src = button 1 up. src; } }

// Tutto qui. // Il passo finale è la chiusura della sezione del programma,

// Tutto qui. // Il passo finale è la chiusura della sezione del programma, che si fa in due righe:

// La prossima riga fa sì che i browser di vecchia data // ricomincino

// La prossima riga fa sì che i browser di vecchia data // ricomincino a interpretare il codice. //--> </script>

riferita al bottone 1 e chiamare questo button 2, button 3, in relazione al

riferita al bottone 1 e chiamare questo button 2, button 3, in relazione al numero di bottoni che vuoi inserire nella pagina. Se vuoi più di un bottone per pagina, devi solamente copiare ogni riga

ESEMPIO

ESEMPIO