16 febbraio 2009

20 commenti Condividi il post Facebook Twitter Google+

Script per visualizzare l'anteprima delle immagini nel blog

La scorsa settimana ho pubblicato un post su Lytebox, un utilissimo script per visualizzare in modo professionale le immagini nel proprio blog.

Oggi invece voglio segnalarvi uno script che permette di visualizzare l'anteprima delle immagini al passaggio del mouse sopra ciascuna immagine.

Per utilizzare questo script, basta aggiungere nel proprio blog prima del tag </head> questo codice:

Javascript Code
  • <script language='javascript' src='http://digilander.libero.it/iolecalblogspot/script/boxover.js' type='text/javascript'/>
  • <link href='http://digilander.libero.it/iolecalblogspot/script/boxover.css' rel='stylesheet' type='text/css'/>

Per vedere lo script in funzione basta passare il mouse sulle immagini. Come al solito le foto utilizzate sono quelle del mio amico Amsis:

Ninfee Aglio Ninfa Ninfea Gazania

Lo script può essere anche utilizzato per visualizzare un tooltip al passaggio del mouse su un testo presente nel blog, come ad esempio questo!!!

Per visualizzare l'anteprima di un'immagine o il tooltip su di un testo basta scrivere:

Javascript Code: Anteprima Immagine
  • <img src="URL IMMAGINE" title="cssbody=[tooltipbody] cssheader=[tooltipheader] header=[TESTO HEADER] body=[<img src='URL IMMAGINE ANTEPRIMA'/>] offsety=[-30]" />

Javascript Code: Tooltip
  • <a href="LINK" title="cssbody=[tooltipbody] cssheader=[tooltipheader] header=[TESTO HEADER] body=[TESTO BODY] offsety=[-30]">Link</a>
Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.

20 commenti

  1. Bellissimo script, quasi quasi lo provo sul mio template...
    Notte :-)

    RispondiElimina
  2. Eh sì, bello e facile da usare!

    RispondiElimina
  3. che bello... mi ci dovrò impegnare parecchio perchè su ste cose son proprio negata!! segnalo questo post a un altro blogger che penso sia molto interessato a questa funzione!!

    ciao fede

    RispondiElimina
  4. @Federica: per qualsiasi chiarimento non esitare a contattarmi ^_^

    RispondiElimina
  5. Simpatico ma ho giá il Blog un pó pesante. Meglio che uno carichi le foto solo se lo vuole cliccandoci sopra.

    RispondiElimina
  6. @Grissino: lo script non dovrebbe appesantire il blog perché le immagini per l'anteprima vengono caricate solo se si passa sopra l'oggetto con il mouse.

    RispondiElimina
  7. Ciao, si spostano di salutare e anche per invitarvi a passare e vedere il mio blog per vedere se trovi qualcosa che ti piace e se ti piace per lo scambio di link, una sorta dendriti della luce o qualsiasi altra cosa vorrei dire, je.
    Cheers e fino a quando la prossima volta.

    Saludos desde Argentina, y perdon por mi pesimo italiano,jeje.

    RispondiElimina
  8. posso chiederti una cosa.... come devo fare?

    carico la foto normalmente... e poi? me lo puoi spiegare passo passo perchè sono un po' tonta!

    RispondiElimina
  9. @Federica: certo... contattami sulla chat!

    RispondiElimina
  10. non ci riesco. mi spiegate passo passo come fare?? grazie.
    ancora una cosa ... se nella pagina ci sono altri script, possono esserci conflitti?? e' molto bello e mi servirebbe propio, spiegatemi come farlo funzionare!! ciao

    RispondiElimina
  11. @Anonimo: nel mio blog ci sono diversi script e questo non va in conflitto con gli altri. Cmq per qualsiasi chiarimento contattami via chat o email. Io non so come contattarti!

    RispondiElimina
  12. Ciao Iole, spero di ricevere una risposta anche se intervengo con ritardo nella discussione.

    Ho installato come hai detto tu lo script in un mio blog, tuttavia le immagini continua ad essere visualizzate come prima. Ho installato solo la prima stringa che hai pubblicato.

    RispondiElimina
  13. @Drewes: cosa intendi per "Ho installato solo la prima stringa"?

    RispondiElimina
  14. anche io ho installato prima di head javascript code pero' le foto si vedono uguale a prima!?

    RispondiElimina
  15. @nicole c: cosa intendi per "ho installato prima di head javascript code"? Oltre ad inserire il codice javascript e css nel blog occorre scrivere la sintassi giusta per le foto.

    RispondiElimina
  16. Iole, ho fatto tutto come hai detto, ma i tooltip mi vengono visualizzati in maniera errata. Puoi aiutarmi?

    RispondiElimina
  17. Ok, installato e funziona! Solo una cosa mi sfugge... non riesco a trovare il modo per cambiare i colori (nulla contro il rosa eh ;P ma col mio blog penso potrebbero andare meglio altri)... è possibile? ^^

    RispondiElimina
  18. @Atane River: devi modificare i colori nel file boxover.css

    RispondiElimina
  19. Ciau Iole!!!

    ^^ Dopo aver installato lo scrypt come segnato nelle istruzioni, il mio blog visualizzava i tooltip esattamente come desiderato!

    Ho modificato i colori e tutto andava alla perfezione. Ti segnalo però un problema verificatosi poco dopo...

    Il caricamento delle pagine è stato significativamente rallentato (10 minuti circa ciascuna... temevo quasi nn mi si aprissero più), cosa che tra l' altro ho riscontrato anche nella sezione chiamata "Elementi pagina" sotto Design.

    Ho provato anche con altri browser, ma il problema persisteva. Ho dovuto disinstallare lo scrypt.

    Forse va in conflitto con qualcosa?

    RispondiElimina
  20. @Atane River: utilizzo lo script da diverso tempo e non ho mai avuto problemi di conflitto.
    Ho notato che lo script funziona solo dopo che la pagina è stata completamente caricata, ma è questione di pochi secondi (non dieci minuti).

    RispondiElimina

Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy