Muovi il Mouse sulla Bottiglia!
Tiralo Via!
Sei Pronto per Creare lo Stesso Effetto?
In questa lezione ti mostreremo come creare un effetto che probabilmente hai visto in altri web site-- fare in modo che una immagine inlinea cambi al momento del passaggio del mouse sopra di essa o se viene premuta. Per l'esempio seguente, la freccia si deformera' al passaggio del mouse, e cambiera' in un aspetto "schiacciato", una volta premuto:
L'uso piu' comune di questa tecnica e' quello di animare un link ad immagine che funziona come bottone, in modo che il visitatore abbia un'ulteriore conferma che l'oggetto sotto il mouse sia qualcosa su cui e' bene fare click.
Mentre sei libero di usare quello che hai imparato in questa lezione per creare bottoni che appaio e saltano, la nostra opinione accademica e' che questo non aggiunge niente alle informazioni della pagina, e per questo il nostro esempio ti mostrera' un uso che ne valga un po' di piu' la pena.
Dovresti considerare un altro fattore; per ogni immagine che vorrai far cambiare al passaggio del mouse, dovrai in realta' scaricare 2 immagini diverse, e come vedrai tra poco, questo deve essere fatto prima del caricamento del codice HTML della pagina. Inoltre, tutto cio' potra' aumentare il prezioso tempo di attesa in cui il visitatore restera' di fronte ad uno schermo vuoto.
Il modo in cui funziona lo scambio d'immagini mouseOver e' simile a questo:
NOTA: Per funzionare correttamente, le immagini che sono scambiate tra loro devono essere della stessa altezza e larghezza.Quello che segue e' un metodo generico per lo scambio di bottoni. Quello usato in questa pagina ha alcune caratteristiche aggiuntive che tu sei incoraggiato ad esplorare guardando il sorgente HTML di questa pagina di lezione.
| Scambio Immagini JavaScript | |
|---|---|
| codice HTML | spiegazione |
|
Tipico inizio di file HTML standard che contiene funzioni JavaScript nel suo <HEAD>...</HEAD>. |
if (document.images) { |
Questo e' un test che determina se il web browser comprende le funzioni di conservazione delle immagini necessarie per lo scambio d'immagini. Se il e' "false", dovremo saltare il resto del codice e visualizzare solo un'immagine statica. |
var button1_up = new Image(); button1_up.src = 'button_up.gif"; |
Creiamo una variabile che e' il tipo che rappresenta Images. La seconda linea assegna la proprieta' src con il path al file della prima immagine, la versione "up". |
var button1_over = new Image(); button1_over.src = 'button_over.gif"; |
Creiamo una seconda variabile Image che assegna la proprieta' src al path al file della seconda immagine per la versione "up" dell'immagine. |
function over_button() {
if (document.images) {
document["buttonOne"].src = button1_over.src
}
}
|
Questa funzione, quando chiamata si assicura' ancora una volta che il browser possa fare lo scambio d'immagini. In questo caso, essa scorre la sua lista interna di immagini inlinea conservate nell'oggetto document, e le assegna la variabile che rappresenta l'immagine per il mouse over o l'immagine sottolineata. |
function up_button() {
if (document.images) {
document["buttonOne'].src = button1_up.src
}
}
|
Questa funzione lavora circa allo stesso modo, eccetto per il fatto che fa tornare l'immagine alla versione "up". |
//--> </SCRIPT> <body> : : : |
Fine del JavaScript e continuazione del codice HTML per la visualizzazione del contenuto della pagina. |
| <A HREF="file.html" onMouseOver="over_button()" onMouseOut="up_button()"><img src="button_up.gif" alt="click me" width="XX" height="YY" name="buttonOne" border=0></a> |
Il tag usato per caricare la prima vista dell'immagine (la versione "up"). Nota che abbiamo assegnato all'immagine dentro il tag <img...> un nome univoco, "buttonOne", a cui ci possiamo riferire usando un codice tipo document["button name"]. Il tag di link contiene un event handler JavaScript, onMouseOver che causera' una chiamata alla nostra funzione per fare lo scambio nella versione "highlight" dell'immagine nel momento in cui il mouse si muove sopra l'immagine stessa. Similmente, l'evento onMouseOut chiamera' l'altra nostra funzione per cambiare l'immagine a quella di partenza nel momento in cui il mouse esce, o "moves out" dall'area dell'immagine. |
Come parte della nostra Introduzione, aggiungeremo una nuova sezione che descriva le rocce vulcaniche, e che includa una immagine di una di queste, chiamata "pumice" [lett. pomice]. Useremo un JavaScript per cambiare l'immagine ad una seconda che mostri un particolare di come la pomice sia guardata sotto un microscopio. Muovendo il mouse fuori e dentro l'immagine, possiamo confrontare i due diversi stati (Okay, ammettiamolo, non e' tanto piu' creativo dell'animazione dei bottoni e che uno puo' ottenere lo stesso risultato mettendo le immagini una accanto all'altra...)
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.images) {
var pum1 = new Image();
pum1.src = "../pictures/pumice.gif";
var pum2 = new Image();
pum2.src = "../pictures/pumice2.gif";
}
function show_rock() {
if (document.images) {
document["pum"].src = pum2.src;
}
}
function hide_rock() {
if (document.images) {
document["pum"].src = pum1.src;
}
}
//-->
</SCRIPT>
NOTA: Abbiamo creato due variabili JavaScript "holder" che rappresentano le due immagini. Chiameremo la funzione show_rock() per lo scambio nella immagine con la visione microscopica (pumice2.gif) e la funzione hide_rock() per riportare l'immagine allo stato originale. Questi eventi accadono ad un'immagine dal nome "pum" che indentificheremo in seguito nel codice HTML
eruzioni osservate da umani.Aggiungeremo una nuova sezione sulle Rocce Vulcaniche. Conterra' l'immagine per la pietra pomice ed il codice per lo scambio d'immagini JavaScript:
<A NAME="vr"><h3 align=center>Rocce Vulcaniche</h2></A>
<A HREF="#vr" onMouseOver="show_rock(); window.status='descrizione scala potere esplosivo'; return true" onMouseOut="hide_rock()"><IMG SRC="../pictures/pumice.gif" align=right ALT="picture of pumice" WIDTH="220" HEIGHT="170" hspace=12 vspace=12 name="pum" border=0></A>
molto esplosive. Il <b>magma</b> caldo, schiumoso, cola velocemente,
lasciando una struttura con dentro contorte cavita' piene di aria. La Pomice e' per questo veramente leggera.
Gli scienziati studiano le rocce in molti modi.
<p>
<La b>Pomice</b> e' un tipo di roccia formata dalla eruzioni vulcaniche
<p>
Se muovi il mouse sopra l'immagine, puoi vedere come appare la Pomice al microscopio.
<p>
Una <b>sezione sottile</b> e' uno strato di roccia tagliato cosi' finemente da permettere alla luce del
microscopio di passarci attraverso e permettere a noi di vedere la struttura della roccia.
<p>
Le intricate camere qui rappresentano le bolle d'aria rimaste nella roccia quando questa e' stata espulsa dal vulcano.
<br clear=right>
NOTA: Presta un'attenzione particolare al codice per il tag <img...>; e' piuttosto complesso ora! Ora si occupa delle mouseOver action, visualizza un messaggio (come abbiamo fatto nella lezione 27a), e saltera' ad un link vicino nel caso il visitatore faccia click sull'immagine (tenendoli sulla stessa pagina). L'immagine e' anche allineata a destra ed ha anche un spazio extra attorno ad essa (hspace e vspace)
Nota che puoi scrivere anche una funzione JavaScript che porti a termine un altro compito generato da un mouse click:
<A HREF="file.html" onMouseOver="over_button()" onMouseOut="up_button()"><img src="button_up.gif" alt="click me" onClick="doButtonClick()" width="XX" height="YY" name="buttonOne" border=0></a>
ammesso che tu abbia scritto una funzione JavaScript nel tuo <HEAD>...</HEAD> che possa reagire a questo evento.
The Internet Connection at MCLI is
Alan Levine --}
Comments to mailto:alan.levine@domail.maricopa.edu?subject=Writing
HTML