Pubblicato il 17/02/11 - aggiornato il  | 18 commenti :

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

uccelli

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.

uccelli e natura

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.




18 commenti :

  1. Bello! Lo provo quando avrò tempo Grazie!

    RispondiElimina
  2. Veramente bello e utile!
    Volevo sapere una cosa, io vorrei utilizzare questo effetto per il mio blog, c'è un modo per inserire il collegamento a un link all'immagine, o convertirla in codice css?
    Infine poi vorrei comunque avere la libertà di spostare questa immagine dove nel blog, come posso fare tramite i codici css?
    Grazie in anticipo ^.^

    RispondiElimina
    Risposte
    1. @ Cheryl Kristine
      Per mettere un link alla immagine puoi usare questo codice

      <a href="URL DEL LINK" target="_blank"/><img src="URL PRIMA IMMAGINE" onmouseover="this.src='URL SECONDA IMMAGINE';" onmouseout="this.src='URL PRIMA IMMAGINE';" title="TITOLO" alt="TESTO ALTERNATIVO"/></a>

      mentre se vuoi posizionarla per esempio al centro devi mettere quest'altro codice
      <div align="center">
      <a href="URL DEL LINK" target="_blank"/><img src="URL PRIMA IMMAGINE" onmouseover="this.src='URL SECONDA IMMAGINE';" onmouseout="this.src='URL PRIMA IMMAGINE';" title="TITOLO" alt="TESTO ALTERNATIVO"/></a>
      </div>

      Al posto di center puoi mettere left o right con ovvio significato. Ho fatto l'esempio del primo codice ma la sintassi è la stessa anche per gli altri

      Elimina
    2. Grazie mille! Appena ho un pò di tempo ci provo! :)

      Elimina
    3. Perchè io in poche parole volevo provare a creare l'effetto del menù in alto, i pulsanti al passaggio del mouse si schiariscono :)
      Con questo metodo dici che riuscirò a farlo? :)
      http://www.keikolynn.com/

      Elimina
    4. @ Cheryl Kristine
      No. Quello è un effetto opacità associato a un effetto hover. Leggi un po' qui
      http://www.ideepercomputeredinternet.com/2011/01/come-opacizzare-una-immagine-e.html
      anche se questo è un po' l'opposto di quello che intendi

      Elimina
    5. ho appena provato con questo metodo per ricreare l'effetto di cui ti parlavo, però purtroppo quando si passa sopra con il mouse resta l'immagine opaca, dove sbaglio?

      Questo è il risultato

      http://krisfitsblog.blogspot.it/
      L'immagine è quella di Halloween in fondo al blog.
      Grazie per tutti i tuoi consigli, il tuo sito è diventata una sottospecie di bibbia per me :)

      Elimina
    6. @ Cheryl Kristine
      Prova con questo codice
      <a href="http://krisfitsblog.blogspot.it/" target="_blank"/><img src="http://i47.tinypic.com/28lamnl.png" onmouseover="this.src='http://i47.tinypic.com/25z5sh5.png';" onmouseout="this.src='http://i47.tinypic.com/28lamnl.png';" title="Halloween" alt="Halloween"/></a>

      Elimina
    7. Metti in ordine il codice togliendo gli spazi in eccesso che si formano quando si posta il codice nei commenti @

      Elimina
    8. Grazie mille sei stato gentilissimo! Ora funziona! *.*
      Per caso è anche possibile spostare il widget, tramite un codice CSS come questo?
      #Image3 img{
      display:block; margin:auto 62px; margin:top: -410px

      Ti ringrazio ancora per il tuo aiuto, sei stato veramente utilissimo per me :)

      Elimina
    9. Dovresti però inserire all'inizio un div class="image3" a alla fine un /div @

      Elimina
    10. Però il problema è che non so che nome abbia il widget, perchè per le foto o immagini caricate nei widget, è appunto Image, per il widget con il codice html, devo cambiare il nome?

      Elimina
    11. @ Cheryl Kristine
      Usa Firebug per Chrome o Firebug per Firefox per conoscere l'ID del widget
      http://www.ideepercomputeredinternet.com/2011/05/firebug-e-una-estensione-di-firefox-per.html
      http://www.ideepercomputeredinternet.com/2012/07/firebug-chrome-blogger-css-html.html
      Ma non è necessario. Prova a inserire un codice come questo
      <style>
      #Image3 img{
      display:block; margin:auto 62px; margin:top: -410px}
      </style>
      <div class="Image3">
      <a href="http://krisfitsblog.blogspot.it/" target="_blank"/><img src="http://i47.tinypic.com/28lamnl.png" onmouseover="this.src='http://i47.tinypic.com/25z5sh5.png';" onmouseout="this.src='http://i47.tinypic.com/28lamnl.png';" title="Halloween" alt="Halloween"/></a>
      </div>

      Elimina
    12. Se non funziona sostituisci #Image3 img{ con #Image3{ e soprattutto metti id="Image3" invece di class="Image3" Ho sbagliato a incollarti il codice :)

      Elimina
    13. Grazie mille! Mi sei stato di vero aiuto! Ti ringrazio tantissimo! Spero di poter contare su di te per un prossimo aiuto :)
      Intanto metto nel mio blog il tuo bannerino, e a breve riceverai una piccola donazione! Grazie ancora! Grazie a te ora riuscirò a fare blog molto più belli! :)

      Elimina
    14. Ciao! Scusa se ti ridisturbo, però ho un piccolo problema.
      Ultimamente sto sperimentando un pò con il nuovo codice che mi hai dato, e sono riuscita a realizzare una cosa molto carina, i due bottoni rosa in fondo al blog
      http://krisfitsblog.blogspot.it/
      Purtroppo però se cambio il margin auto si muovono tutti e due, e se cambio il margin top invece non succede nulla, vorrei poterli spostare come voglio per esempio mettere il tasto Profile attaccato a quello della Home, come posso fare?

      Elimina
    15. @ Cheryl Kristine
      I bottoni rosa li vedo nella parte alta del blog, credo siano quelli. Li hai giustamente messi in una tabella di una colonna e due righe. Se li vuoi mettere affiancati usa una tabella di una riga e due colonne ma a me sembra che vadano bene così

      Elimina
    16. Grazie :) Il fatto è che io volevo che sembrassero proprio appartenenti a un menù, è per questo che volevo farsì che fossero praticamente appiccicati :)
      Stavo cercando un codice CSS per avvicinarli ma non ho avuto molta fortuna XD

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.