Immagini con effetto rollover

































Riguardando un po' la grafica del mio blog ho pensato che un' idea per renderla più particolare e personale potrebbe essere quella di applicare ad alcune immagini (ad esempio alle icone che rimandano ai social network) un effetto rollover. Ciò significa che l'immagine cambia quando vi si passa sopra con il mouse: ne avete un esempio nelle due immagini qui sotto. 
L'immagine può cambiare in diversi modi: può passare da un colore opaco ad uno più deciso (come nell'esempio qui sotto) o il contrario, oppure possono cambiare anche il colore e l'immagine stessa. Le combinazioni sono infinite e ognuno può decidere in base alle sue necessità.

Click MeClick Me

Creare un immagine con effetto rollover non è difficile quanto potrebbe sembrare.
Come prima cosa bisognerà creare due immagini: un'immagine sarà quella di partenza (la chiameremo immagine 1) ed una seconda immagine (immagine 2) che è quella che andrà a sostituirsi all'immagine 1.  L'immagine 1 è quella che vogliamo venga immediatamente visualizzata (nel caso dell'esempio qui sopra quella opaca), mentre l'immagine 2 è quella che ci apparirà al passaggio del mouse (in questo caso quella dai colori più vivi).
Una volta create le due immagini ci serviranno i rispettivi url: per ottenerli caricate le immagini su Photobucket o simili oppure inseritele in un post (che poi non andrà pubblicato ma salvato come bozza) e ottenete l'url come avevo già spiegato nell'ultima parte di questo post

Una volta pronte le due immagini basterà copiare il codice qui sotto nel luogo in cui vogliamo inserire l'immagine. Se si vuole, ad esempio, inserirla nella colonna laterale del blog come link ad un social network bisognerà copiare il codice in un gadget HTML/Java Script. Ma lo stesso codice può essere utilizzato anche per inserire un'immagine con effetto rollover anche all'interno di un singolo post.

<a href="LINK"><img src="IMMAGINE1" onmouseover="this.src='IMMAGINE2'" onmouseout="this.src='IMMAGINE1'" alt="Click Me"/></a>

Una volta copiato il codice bisognerà naturalmente andare ad inserire l'url dell'immagine 1 e poi dell'immagine 2 dove indicato (sostituendo l'url alla scritta colorata in stampatello), e quindi inserire il link della pagina a cui l'immagine con effetto rollover deve rimandare (ad esempio quella del nostro profilo Twitter).

5 commenti:

  1. io cercavo proprio questa cosa! (tra le altre mille)

    RispondiElimina
  2. Ti adoro.
    Ogni volta che voglio cambiare qualcosa al mio blog passo da te e trovo il tutorial! :)
    Te lo ripeto, ti adoro.

    Bio Change

    RispondiElimina
    Risposte
    1. Potrei arrossire!! Grazie per la tua fiducia! xoxo

      Elimina

Un penny per i tuoi pensieri!
xoxo