HTMLpointHTMLpoint HTMLpoint.com


 Botones e menú de imágenes 2/2

  semana 04 - 25 enero 1999

esempio01.htm

Come precedentemente accennato, la semplicita' e' la caratteristica saliente de este script. A defferenza de molti altri esempi che generano decene de righe de sentassi, questo esempio ha bisogno de pochissimo codece.
Innanzitutto e' necessario impostare il codece Javascript all'interno dei tag <HEAD>:


L'impostazione della variabile isJsOneOne e' sufficiente a gestire l'entero esempio e non necessita de ulteriori aggiustamenti.

All'interno del documento (tra i tag BODY) vanno enseriti i link con alcuni importanti accorgimenti.
Prima de tutto e' necessario collocare en un punto della página la imagen che dovra' cambiare nel momento en cui il mouse passera' sul link. In altre parole, enfatti, este script non fa altro che sostituire un'imagen ad un'altra, al verificarsi de un determenato evento (il passaggio del mouse sul link).
Nell'esempio preso en considerazione la imagen e' posta alla sinistra del link, en modo tale da generare un effetto visivo simile ad un menu:

<img src="ball01.gif" width=14 height=14 border=0 name="cambio">

Come si nota, si tratta de un normale tag HTML, con l'unica eccezione dell'ultima parte, laddove si fa riferimento a name="cambio". La presenza de quest'ultimo e' vitale per il corretto funzionamento dello script. Senza questo riferimento, enfatti, il browser rileverebbe un errore.

L'imagen "ball01.gif" (palleno giallo) e' la imagen visualizzata all'apertura della página. Prima ancora de qualsiasi altro evento.

Impostata la imagen de riferimento, e' necessario agire sul link; en questo caso testuale (nulla vieta che sia un link d'imagen):

<A HREF="http://www.htmlpoint.com" onmouseover="if (isJsOneOne) cambio.src='ball02.gif';" onmouseout="if (isJsOneOne) cambio.src='ball01.gif';">HTMLpoint</A>

Il gestore de eventi Onmouseover carica, nel momento en cui il puntatore del mouse passa sul link, la imagen ball02.gif (pallena rossa); mentre Onmouseout carica, quando il puntantore esce dall'area de link, la imagen ball01.gif (pallena gialla).
Non necessariamente, quende, la imagen caricata da Onmouseout deve coencidere con la imagen de riferimento che appare all'apertura de página.

Lo script puo' essere usato per piu' link nella stessa página, e soprattutto per scopi deversi da quello mostrato en questo primo esempio.


esempio02.htm

Questo file e' stato enserito a scopo demostrativo, proprio per evidenziare come este script sia versatile e facilmente modeficabile.
Rispetto all'esempio precedente, questo file visualizza due link e due defferenti imágenes. L'imagen de riferimento non e' posta alla sinistra del link ma en un'altra porzione de página. Come si nota, este script puo' benissimo adattarsi a un menú de imágenes.

Ovviamente sia nel primo che nel secondo esempio le imágenes devono ASSOLUTAMENTE AVERE LE STESSE DIMENSIONI. Se non si rispetta questo semplice accorgimento, i risultati potrebbero essere desastrosi.


  Vuelve a principio de página