Come nascondere una immagine e mostrarla cliccandoci sopra con il mouse.

Nell'attività fotografica talvolta si possono fare delle realizzazioni che potrebbero urtare la sensibilità dei lettori del blog. Sarebbe quindi opportuno mantenere queste foto nascoste dando l'opzione di visualizzarle solo a chi lo desideri. Insieme a questa funzionalità sarebbe interessante inserirne un'altra che permettesse di ripristinare la situazione precedente.

Questa personalizzazione mi è stata richiesta in un commento ma potrebbe essere utilizzata anche da altri blogger fotografici che si trovassero nella stessa situazione. Il trucco consiste nell'inserire una opacità massima nella immagine che poi sarà visibile se ci verrà cliccato sopra.

Prima di procedere all'illustrazione del procedimento, ecco una immagine completamente opaca che può essere visualizzata cliccandoci sopra con il mouse

Clicca sul riquadro per visualizzare la foto. Attenzione! Immagine non adatta ai maschi deboli di cuore

Per creare questo effetto si può utilizzare l'editor di Blogger oppure Windows Live Writer.
Editor di Blogger

Si inserisce l'immagine attraverso il suo URL acquisito su Picasa, SkyDrive, Imageshack o altri hosting. In alcuni modelli di blog è presente di default una cornice per le immagini. E' comunque consigliabile andare su Aggiungi Didascalia per inserire la descrizione della foto e informare il lettore che la potrà vedere solo cliccandoci sopra. Si va adesso su Modifica HTML e si inseriscono queste due stringhe

onclick="this.style.opacity=1.0;this.filters.alpha.opacity=100"

style="filter: alpha(opacity=00); opacity: 0.0;"

rispettivamente prima e dopo l'URL della sorgente della immagine come mostrato nel seguente screenshot

Si pubblica il post come al solito.

Windows Live Writer

Con Windows Live Writer si può usare lo stesso sistema, ma non è possibile aggiungere una didascalia alla immagine. Se la riteniamo necessaria per informare i lettori della particolarità della foto, possiamo andare su Origine e incollare questo codice

<table border="2"  align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style=" text-align: center;"><img onclick="this.style.opacity=1.0;this.filters.alpha.opacity=100" src="URL_IMMAGINE" style="filter: alpha(opacity=00); opacity: 0.0;" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">DIDASCALIA_IMMAGINE</td></tr>
</tbody></table>

Dove le stringhe per l'effetto sono evidenziate di rosso e dove devono essere aggiunti l'indirizzo della foto e la descrizione della immagine. Si può anche configurare la dimensione del bordo della tabella in pixel. Dopo aver incollato il codice, bisogna ritornare con la visione normale cliccando in basso su Modifica. E' fortemente consigliato inserire i tag ALT e TITLE, andando su Testo Alternativo, per favorire l'indicizzazione della foto e il lato SEO del post. Anche in questo caso si pubblica il post senza altri accorgimenti.

I lettori vedranno una cornice completamente bianca e visualizzeranno la foto solo se ci cliccheranno sopra. Rinfrescando la pagina, l'immagine ritornerà di nuovo opaca al 100%.

Se volete mostrare qualcosa dell'immagine mantenendola quasi completamente opaca, sostituite i due valori 00 e 0.0 rispettivamente con 10 e 0.1. Se invece volete che l'immagine sia visibile solo a seguito di un doppio click del mouse, al posto di onClick inserite onDblClick.