Pubblicato il 09/01/11 - aggiornato il  | 12 commenti :

Come opacizzare una immagine e illuminarla al passaggio del mouse.

Effetto trasparenza in una immagine
Il concetto di opacità di una immagine è ben conosciuto da chi è esperto di programmi di grafica. Si possono prendere a prestito alcuni concetti per rendere più interessanti le immagini del nostro blog.



Ho postato usato un codice per una opacità al 70%. Se si vuole variare la percentuale basta sostituire a 70 e 0.7 con altri numeri. Ricordo che la percentuale è inversamente proporzionale alla opacità. In altri termini una opacità al 30% significa che l'immagine è meno visibile che con una opacità al 60%. Ecco alcuni esempi



<img style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);filter:alpha(opacity=70);-moz-opacity:0.7;opacity: 0.7;-khtml-opacity: 0.7;" src="URL-IMMAGINE"/>

fiori di pesco fiori di pesco
Fiori di pesco Fiori di pesco
Passate sopra con il mouse per visualizzare il grado di opacità di ciascuna foto. Se si vuole opacizzare una immagine dopo averla inserita sull'editor di Blogger o su un post creato con Windows Live Writer, occorre inserire i parametri necessari andando in modalità HTML. Bisognerà cioè creare un apposito stile
style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);-moz-opacity:0.8;opacity: 0.8;-khtml-opacity: 0.8;"
e incollarlo dopo il tag <img . In WLW si può inserire solo il codice
style="filter: alpha(opacity=40); -moz-opacity: 0.4; opacity: 0.4; -khtml-opacity: 0.4"
come mostrato nello screenshot cliccabile
opacità immagine
Naturalmente vanno inseriti i giusti parametri al posto di quelli evidenziati di rosso.
E' possibile mostrare una diversa opacità di una foto al passaggio del mouse generando un effetto suggestivo. Provate con la foto qui sotto
Il codice da usare in questo caso è il seguente
<img style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1.0;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" src="URL DELLA IMMAGINE"/>
che comporta una visibilità completa (100 o 1.0) quando il mouse è sopra all'immagine (onmouseover) e una opacità al 30% quando non c'è (onmouseout). Per l'effetto opposto, cioè visibilità totale senza mouse e opacità con il mouse, occorre invece questo codice
<img style="opacity:1.0;filter:alpha(opacity=100)" onmouseover="this.style.opacity=0.3;this.filters.alpha.opacity=30" onmouseout="this.style.opacity=1.0;this.filters.alpha.opacity=100" src="URL DELL'IMMAGINE"/>
Dopo i codici dei colori in RGB che determinano i valori di rosso (red), verde (green) e blu (blue) è venuto anche lo standard RGBA dove A sta per Alpha. Anche con il colore RGB c'era comunque l'attributo opacity che poteva servire a questo scopo. Al posto di fogli di stile di questo tipo
body {background : rgb(18,32,64); }
si può adesso utilizzare una sintassi che determina anche la opacità del colore
body {background : rgba(18,32,64,.4); }
dove l'ultimo numero ne fissa l'opacità. Non sarà quindi più necessario scolorire una foto con un programma di grafica.




12 commenti :

  1. Scusa, al di là del sicuro effetto estetico, questo sarebbe sempre nell'ottica di impedire i furti? ossia, se qualcuno scarica la foto se la ritrova in versione opaca?

    ciao grazie

    RispondiElimina
  2. @Monica D.
    Purtroppo no. Questo trucchetto serve solo per "vivacizzare" articoli o widget del blog e l'immagine può essere scaricata senza problemi. Questo effetto può però essere inserito insieme a quello della disabilitazione del destro del mouse

    RispondiElimina
  3. Approfitto di questo interessante tuo post per chiederti come ottenere un effetto simile ma non uguale a questo. Ogni tanto nel mio blog mi piacerebbe oscurare una immagine magari un po' cruda con un fondo nero e una scritta di attenzione, per poi lasciare all'utente la scelta se visualizzarla o meno. Si può fare semplicemente? Se vuoi vedere un esempio lo trovi qui: http://www.boston.com/bigpicture/2010/12/2010_in_photos_part_1_of_3.html (foto dieci)

    RispondiElimina
  4. @Momo
    bisogna cambiare l'azione dal passaggio del mouse (onmouseover) al click del mouse (onclick). Però le mie conoscenze di javascript non mi consentono di ricreare l'effetto nella sua interezza.

    RispondiElimina
  5. @Momo
    Forse ho trovato un sistema simile che funziona

    RispondiElimina
  6. Parsifal, bene attendo tue nuove in merito. E grazie infinite!

    RispondiElimina
  7. Ciao Parsifal. Io chiedo ancora a te perchè sei la mia fonte illuminante, sto creando un blog partendo con conoscenze zero e traggo sempre spunto dal tuo magnifico lavoro.
    Veniamo al punto: vorrei far comparire, al passaggio del mouse sopra ad un'immagine, una scritta, proprio come hai fatto tu per indicare l'opacità delle varie immagini. Puoi indirizzarmi al post se già esiste? o darmi delle dritte in caso contrario?
    Grazie mille

    RispondiElimina
  8. @SilVan
    La scritta che vedi al passaggio del mouse è quella che si mette all'interno del tag Title. Leggiti questo post
    http://www.ideepercomputeredinternet.com/2010/11/come-farsi-indicizzare-foto-e-immagini.html
    e ti sarà tutto chiaro.

    RispondiElimina
  9. Ciao, non c'è un modo per rendere questo codice più breve? mi piacerebbe tanto usarlo ma avendo unlimite di caratteri sono stata obbliagata a rinunciarci. si potrebbe ad esempio usare un tag style unico per quattro immagini senza doverlo ripetere quattro volte?

    RispondiElimina
    Risposte
    1. @Arukuho
      L'opacità è diversa quindi ogni immagine deve avere un suo filtro. Si può usare lo stesso codice se si vuole la stessa opacità.

      Elimina
    2. anche usando la stessa opacità per ogni immagine? ho provato con un "div" con gli stessi parametri, ma mi illuminava e opacizzava le immagini in blocco... davvero non ce modo per ovviare a questo problema?

      Elimina
    3. @Arukuho
      Presumo di sì ma la cosa non è immediata. Bisognerebbe creare una classe di stile per poi richiamare solo la classe nelle immagini che vogliamo opacizzare. Però c'è il problema che per Firefox si usa la sintassi
      this.style.opacity=0.4
      per IE invece this.filters.alpha.opacity=40
      e poi c'è da considerare i due eventi mouse cioè il mouse che passa sopra alla foto onmouseover e quando la lascia onmouseout. Può darsi che la possibilità esista ma non mi viene in mente nulla, mi spiace ma sono solo un modesto dilettante :)

      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.