Pubblicato il 02/02/11 - aggiornato il  | 38 commenti :

Effetto per ingrandire le immagini al passaggio del mouse o con un click

Effetto per ingrandire le immagini al passaggio del cursore o con un click del mouse che non utilizza librerie javascript.
Ho già illustrato l'effetto Expando che è abbastanza semplice da installare e fa in modo di aumentare la dimensione delle immagini al passaggio del mouse. Questo effetto presuppone l'introduzione di un javascript nel modello di Blogger. Se si pensa di avere poche occasioni per proporre nel blog una simile personalizzazione, si può optare per un metodo di inserimento delle immagini meno invasivo che agirà solo su una determinata foto e solo nel post in cui è stata inserita.

Le immagini che si vogliono postare devono essere preventivamente caricate su servizi tipo Picasa, SkyDrive o DropBox. L'effetto funzionerà con tutti i browser ma con IE sarà più lento che con Chrome e Firefox.

Immagine che si ingrandisce al passaggio del mouse

Ecco il codice da inserire in modalità HTML

<div align="center"> <img width="149" height="109" style="cursor: -moz-zoom-in;" src="http://public.blu.livefilestore.com/y1pk4geuMwTW8kVzqWNvJ0LhmsuFw8cQdfEwrD54brZLjzBKc_BePuoN1rJOgQicJVv-OT0iwiEEVUwfIFfs0UGfQ/bicchieri3.jpg" onmouseover="this.width=596;this.height=435;" onmouseout="this.width=149;this.height=109;" title="titolo" alt="testo alternativo" /></div>

I dati possono essere personalizzati in questo modo
  1. width="149" height="109" sono le dimensioni iniziali della immagine
  2. width=596; e height=435; sono le dimensioni che assume quando si passa sopra con il mouse
  3. L'URL in rosso è quello della immagine e deve essere sostituito
  4. Il tag Title e Alt si inseriscono come al solito per dare un nome alla immagine e in ottica SEO
  5. <div align="center"> e </div> servono per centrare l'immagine nel layout della pagina. Se si tolgono le due righe si visualizzerà in linea con il testo mentre se si sostituisce center con right o left la foto sarà spostata rispettivamente tutta sulla destra o sulla sinistra.
Ecco un esempio pratico di come funziona questo codice

bicchieri

Se provate a passarci sopra con il mouse l'immagine aumenterà le sue dimensioni. Quando si inseriscono la larghezza e l'altezza della miniatura, bisogna fare in modo che siano mantenute le proporzioni originali altrimenti l'immagine verrà distorta.






Immagine che si ingrandisce con un click e ritorna normale con un doppio click

Con questo effetto per ingrandire la foto dobbiamo cliccarci sopra. Di seguito riporto il codice da incollare in modalità HTML

<div align="center">
<img width="149" height="109" style="cursor: -moz-zoom-in;" src="https://public.blu.livefilestore.com/y1pk4geuMwTW8kVzqWNvJ0LhmsuFw8cQdfEwrD54brZLjzBKc_BePuoN1rJOgQicJVv-OT0iwiEEVUwfIFfs0UGfQ/bicchieri3.jpg" onclick="this.width=596;this.height=435;" ondblclick="this.width=149;this.height=109;" title="titolo" alt="testo alternativo" /></div>

Le personalizzazioni sono le stesse di prima e quindi non sto a ripetermi.


38 commenti :

  1. Salve,
    volevo ringraziarti..dopo giorni ..finalmente con il tuo articolo sono riuscito ad ottenere quello che volevo, solo che la foto quanfo si ingrandisce, diventa trasparente e il testo si vede sotto la foto.Come posso fare a farla andare in primo piano?
    Grazie
    Stefano

    RispondiElimina
  2. @bilete...
    Non dovrebbe succedere. Usi il formato JPG? Hai magari IE come browser? Prova a rimpicciolire un po' la foto originaria.
    Ciao

    RispondiElimina
  3. Ehh non sono tanto esperto..ti faccio vedere il sito, la foto e la prima delle piccole sotto (il primo giorno)


    http://www.viaggiromania.com/city-break.html

    Grazie

    RispondiElimina
  4. dimenticavo..sto usando Firefox su Mac, l immagine e Gif, ho provato a cambiarla in Jpg ma si e rinpiciolita..

    RispondiElimina
  5. @bilete...
    Io uso Chrome e non si vede nessun effetto in nessuna foto. Hai una immagine di sfondo che rende il tuo sito lentissimo da caricare. La prima immagine del primo giorno non si vede proprio :-(
    Forse hai usato una tabella e il formato non è adatto.

    RispondiElimina
  6. Scusa se ti disturbo ancora..allora con chrome ho risolto, ho installato anche io e ho notato che non avevo nominato bene l immagine..ora si vede..per quanto riguarda l immagine di fondo, lo so devo allegerirla...ma ora ho problemi piu importanti :))..devo risolvere assolutamente con l immagine..credo sia una cavolata ma non conoscendo bene DW ci perdo le notti.e la testa :(

    RispondiElimina
  7. @bilete..
    Ora funziona però hai messo l'immagine in una tabella quindi non può espandersi. Deve essere senza vincoli per poterlo fare, come vedi per esempio in questo post. Non ha niente a sinistra e a destra.
    Ciao

    RispondiElimina
  8. Ciao sono nuovo, vorrei sapere una cosa. Ho inserito entrambi i tuoi codici per fare una prova e funzionano benissimo, ma io vorrei fare espandere la foto al centro dello schermo, perche sia a destra che a sinistra dello shermo ho dell'altro
    Come posso fare? Penso che ci sara' qualche altro codice per far si che la foto si espandanda centralmente? o sbaglio
    Grazie per la tua cortesia e l'aiuto che ci dai

    RispondiElimina
    Risposte
    1. @MauroIsoni
      L'attributo "center" dovrebbe fare in modo che la foto rimanga sempre al centro del layout. Se non accade nel tuo blog non saprei cosa dirti ...

      Elimina
    2. Prima di tutto grazie della tua risposta, poi erroneamente mi sono dimenticato di dire che non e' un blog ma un sito internet, infatti ho provato a sostituire center con right o left ma rimane uguale.
      Ciao grazie

      Elimina
    3. @ Forse allora è per quello. Dipende dagli altri elementi presenti nel layout

      Elimina
  9. Grazie per il tutorial. É possibile, e se si come si fa, che l'immagine, oltre ad ingrandirsi possa emettere un suono? Non mi riferisco per forza ad un semplice tono, ma magari eseguire un breve file audio......grazie ancora.

    RispondiElimina
    Risposte
    1. @ riki
      C'è un sistema che funziona solo con IE
      http://www.ideepercomputeredinternet.com/2011/07/come-inserire-effetti-sonori-al.html
      A breve proverò a pubblicare un tutorial più completo (forse...)

      Elimina
    2. Grazie Ernesto. Spero che ti arrivi "l'ispirazione" per pubblicare il tutorial. :D Ciao e grazie

      Elimina
  10. Ciao Ernesto. Prima di tutto complimenti per il tuo sito. Grazie a te sono riuscito a migliorare notevolmente i miei blog. Peró ho un piacere da chiederti: sto progettando un nuovo blog dove vendere articoli usati e avrei bisogno di un effetto zoom simile a quello che hai descritto qui, ma un poco diverso. L'ideale sarebbe avere un effetto simile a questo:

    https://www.enjoei.com.br/produto/shortinho--45

    Hai idea come si possa ottenere e se é applicabile anche a Blogger? Ti ringrazio anticipatamente.

    Ciao e a presto.

    RispondiElimina
  11. Veramente una guida ben fatta.
    Una domanda: per il secondo effetto è possibile "far rientrare" lo zoom dell'immagine con un solo click e non con un doppio click? Grazie.

    RispondiElimina
    Risposte
    1. Con questo codice l'evento del mouse deve essere diverso. Un click per attivare e doppio click per disattivare. Al posto del doppio click si può provare a inserire l'evento che il mouse non sia più sopra all'immagine sostituendo onmouseouta ondblclick
      @#

      Elimina
    2. E.C. onmouseout da sostituire a ondblclick

      Elimina
    3. Facendo così però l'immagine ritorna all'originale se sposto il mouse dall'immagine zoomma. Si può fare questo con un click del mouse? Cioè un click per ingrandire e un click per rimpicciolire...
      Grazie comunque.

      Elimina
  12. Scusa non avevo letto la tua prima risposta...
    Quindi non si può fare nulla?
    Oppure come si può combiare il codice?

    RispondiElimina
    Risposte
    1. Ti ho già risposto nel commento 11.a e 11.b
      @#

      Elimina
    2. Forse non mi sono spiegato, comunque grazie lo stesso.
      Ribadisco che il tuo sito è molto ben fatto.
      Grazie ancora.

      Elimina
  13. Ciao!mi sai dire invece come è possibile fare in modo che con il passaggio del cursore sopra la foto, la foto stessa venga zoomata?
    puoi vedere un esempio qui: (www.)calendars.com/Italy/Rome-2015-Wall-Calendar/prod201500005535/?categoryId=cat00714&seoCatId=cat00714
    grazie!

    RispondiElimina
    Risposte
    1. Prova questo effetto
      http://www.ideepercomputeredinternet.com/2014/08/zoom-effect-like-amazon-ebay.html
      Qui c'è la demo
      http://demo-blogger-widget.blogspot.it/2014/08/post-di-demo-su-effetto-zoom-stile.html
      @#

      Elimina
  14. Buon pomeriggio, ho letto e ringrazio per l'ottimo suggerimento... solo che ho io un problema.. ho 4 foto una accanto all'altra in 4 celle di una tabella ... in ogni cella c'è chiaramente una foto, quando uso questo procedimento si ingrandisce certo la foto ma si sfasa tutta la riga della foto in oggetto... esiste un metodo che senza poup e cose del genere, in effetti semplice come l'esempio di cui sopra che non mi crei questo problema ?.. spero di essere stato chiaro grazie :)

    RispondiElimina
    Risposte
    1. Prova questo sistema
      http://www.ideepercomputeredinternet.com/2014/07/effetto-zoom-immagini-blogger.html
      o quest'altro
      http://www.ideepercomputeredinternet.com/2012/07/css3-immagini-effetti-scale.html
      @#

      Elimina
  15. Io lo sto provando, funziona ma l'immagine me la sfoca.
    Perché?

    RispondiElimina
    Risposte
    1. Perché hai scelto una foto con bassa risoluzione. Scegline una più grande. Prova anche questo effetto con CSS3 che è meno repentino
      http://www.ideepercomputeredinternet.com/2015/03/effetto-zoom-immagini-testo-css3.html
      @#

      Elimina
  16. Ciao Ernesto,
    i tuoi suggerimenti sono sempre preziosi, grazie.
    Ho utilizzato la seconda opzione qui: http://www.ispirazioninfiera.it/p/gallery.html e il risultato è al di sopra delle aspettative.
    Nei dispositivi mobili, però, il doppio click per chiudere ovviamente non è utilizzabile, c'è modo secondo te per chiudere senza dover ricaricare la pagina?

    Grazie

    Federica

    RispondiElimina
    Risposte
    1. Il corrispettivo mobile del doppio click dovrebbe essere un doppio tocco ravvicinato. Prova anche con una pressione più lunga e toccando all'esterno della foto ingrandita
      @#

      Elimina
    2. Ho provato, ma non funziona.
      Per carità non è un problema insormontabile, giusto una curiosità.
      Invece, già che ci sono, la crocetta che si vede spesso sulle immagini si può aggiungere secondo te oppure è proprio un altro tipo di funzionamento?
      Grazie

      Elimina
  17. In questo post aperto con Chrome da mobile il tocco e doppio tocco funziona. Le crocette forse le hai viste in qualche sito che utilizza un JavaScript particolare
    @#

    RispondiElimina
    Risposte
    1. Allora sono io che sono impedita.
      Grazie, comunque, per aver confermato il funzionamento.
      Buona giornata

      Elimina
    2. Credo che sia anche un problema di dimensione delle immagini.
      @#

      Elimina
  18. Risposte
    1. Sul mobile probabilmente le immagini troppo grandi non rendono bene se prendono tutto il layout disponibile (ipotesi)
      @#

      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