Effetti per immagini realizzati solo con l'ausilio del mouse.

Come aggiungere effetti speciali alle immagini al passaggio del cursore e con il click del mouse.

Vediamo come si possano postare delle foto su un articolo con alcuni effetti molto semplici e originali che si ottengono solo con l'uso del mouse e senza caricare nessun javascript nell'articolo e tanto meno nel modello. Il primo che vado a proporvi riguarda due immagini. La prima si visualizzerà in condizioni normali mentre la seconda apparirà solo se si passa sopra con il mouse. Il codice da incollare in un post o in un gadget HTML/Javascript è il seguente

<img src="URL PRIMA IMMAGINE" onmouseover="this.src='URL SECONDA IMMAGINE';" onmouseout="this.src='URL PRIMA IMMAGINE';" title="TITOLO" alt="TESTO ALTERNATIVO"/>

Si inseriscono ovviamente gli indirizzi delle immagini che saranno state precedentemente caricate su Picasa o Skydrive. L'effetto che si ottiene è questo

Se si passa con il mouse sulla foto, apparirà quella in secondo piano. Vediamo adesso un effetto un po' più complicato. Il codice da postare in modalità HTML o in un widget HTML/Javascript è questo

<img src="URL PRIMA IMMAGINE" onmouseover="this.src='URL SECONDA IMMAGINE';" onmouseout="this.src='URL PRIMA IMMAGINE';" onclick="this.src='URL IMMAGINE CON CLICK'"
onDblClick="this.src='URL IMMAGINE CON DOPPIO CLICK'" title="TITOLO IMMAGINI" alt="TESTO ALTERNATIVO"/>

In questo caso si otterrà questo effetto

dove le immagini inserite sono addirittura quattro. La prima immagine sarà visibile in assenza di azioni da parte del mouse, la seconda quando ci si passa sopra, la terza quando ci si clicca sopra e la quarta quando si fa doppio click.

Concludo con un terzo effetto formato da tre immagini. Quella principale si vede in condizioni normali, la seconda quando si tiene il mouse premuto e la terza quando si rilascia. Ecco il suo codice

<img src="URL PRIMA IMMAGINE"  onMouseDown="this.src='URL IMMAGINE CON MOUSE PREMUTO'"
onMouseUp="this.src='URL IMMAGINE CON MOUSE RILASCIATO'"
onmouseout="this.src='URL PRIMA IMMAGINE';"
title="TITOLO IMMAGINE" alt="TESTO ALTERNATIVO"/>

con gli URL delle foto da incollare al posto delle scritte colorate di rosso.

I tag Title e Alt è sempre opportuno che siano sempre inseriti contestualmente a delle immagini per mostrare al navigatore il titolo della foto in un tooltip e a beneficio dei motori di ricerca. Ho usato alcuni eventi attivabili con il mouse e che sono

1. OnClick: attivato quando si clicca su un oggetto
2. OnDblClick: attivato quando si fa doppio click su un elemento
3. OnMouseDown: attivato quando si preme il tasto sinistro del mouse
4. OnMouseUp: attivato quando si rilascia il tasto sinistro
5. OnMouseOver: attivato quando si passa sopra all'oggetto
6. OnMouseOut: attivato quando si toglie il mouse dall'oggetto
7. OnContextMenu: attivato quando si schiaccia il destro del mouse

Attraverso la sintassi illustrata in precedenza potete sbizzarrirvi a creare le combinazioni di eventi più utili alle vostre esigenze o ai vostri gusti.