Pubblicato il 11/01/11 - aggiornato il  | 13 commenti :

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


anjelina jolie
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

aggiunta stringhe immagine per opacizzarla

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.



13 commenti :

  1. sai che cercavo proprio qualcosa del genere? volevo fare un post mostrando il prima e il dopo l'utilizzo di una maschera di pulizia, ma un primo piano dei miei punti neri non è esattamente il massimo!

    RispondiElimina
  2. @filokalos
    Per i punti neri non ti saprei dire ma credo che sia possibile visualizzare due immagini diverse quando si clicca sopra alla prima.

    RispondiElimina
  3. beh non credo bisogna essere uomini per apprezzare una tale bellezza.
    Quanno ce vò,ce vò... non so se è scritto correttamente:-)
    Visto che utilizzo live writer proverò l'effetto,magari con una mia foto.
    A quel punto però sarebbe meglio se non apparisse:-))))
    un abbraccio
    Lella

    RispondiElimina
  4. cIAO MOLTO CARINO,PERO' HO FATTO IL CODICE INSERITO LA FOTO MA SE CLICCO NON APPARE,CHE HO SBAGLIATO?

    gRAZIE MILLE CIAO
    PEPPE

    RispondiElimina
  5. Scusa se ho scritto grande mi sono sbagliato.Il codice non mi entra in questo commento comunque in src=Ho messo la foto il resto l'ho lasciato uguale.
    Ciao
    Peppe

    RispondiElimina
  6. @gipullo
    Se hai inserito correttamente l'URL della immagine e hai ricopiato il codice dovrebbe funzionare. A meno che tu non abbia un blog su una piattaforma diversa da Blogger che non supporti questo effetto

    @lella
    Tanti saluti, è sempre un piacere risentirti

    RispondiElimina
  7. @Parsifal grazie della risposta,allora credo che il problema sia quello.Ho messo il codice non sul mio blog (Altervista)ma nell'applicazione FBML per pagine Fan di Facebook e forse non supporta quel tipo di codice HTML o deve essere modificato apposta per l'HTML su Facebook.Lo volevo mettere nella mia Landing Page ► http://www.facebook.com/FansettiGiusyPeps?v=app_4949752878 perche' anche se non ci capisco molto di HTML mi piace trovare codici carini da inserire nell'FBML anche se purtroppo non so crearli.Ogni tanto trovo qualcosa nel Web e copio o chiedo alle altre pagine ma ho notato che passare un codice HTML e' come prestare la propria macchina ad uno sconosciuto....e non li da nessuno.Comunque complimenti per il tuo Blog e la tua pagina alla quale mi sono iscritto e poi ti pubblicizzero' sulla mia!Ciao
    Peppe

    RispondiElimina
  8. @gipullo
    IL codice FBML di Facebook è tutto particolare, non mi stupisco affatto che non funzioni questo hack. Ciao

    RispondiElimina
  9. Hai ragione grazie comunque!
    Ciao!

    RispondiElimina
  10. Ciao forse non c'entra niente col post comunque è possibile che al passaggio del mouse o clickando su un immagine se ne visualizzi un altra? grazie

    RispondiElimina
    Risposte
    1. @StefanoVinci
      In questo post
      http://goo.gl/ZNi8g
      ci sono molti effetti che potrebbero interessarti

      Elimina
    2. ciao Ernesto ho provato ma l'immagine non cambia rimane la prima... ho provato a caricare le immagini sia su picasa sia si skydrive e ho incollato il codice sia su un post sia in un gadget HTML... ma non me la cambia rimane sempre quella...

      Elimina
    3. @StefanoVinci
      Il codice funziona come si vede dalle demo. Prova a postare direttamente dalla modalità HTML e incolla il codice della immagine per ultimo. Delle volte Blogger lo modifica se si passa alla modalità Scrivi.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy