•  

ForumCommunity

Wiki - CSS Popup image viewer

    Codice per l'utilizzo


    Codice che vi permette di visualizzare un'immagine al passaggio del mouse:
    Inserire in "Colori e Stili"
    CODICE
    /* THUMB */
    .thumbnail {position: relative; z-index: 8; text-decoration: none !important}
    .thumbnail:hover {background: transparent; z-index: 9}
    .thumbnail > span {display: none; position: absolute; top: 0; left: 60px; padding: 5px}
    .thumbnail > span img {padding: 2px}
    .thumbnail:hover > span {display: block; border: 1px dashed gray; background-color: #FFF; color: black;}
    .thumbnail:hover span span {display: inline; border: none}


    Per personalizzare il blocco che contiene l'immagine che appare al passaggio del mouse bisogna riferirsi a "thumbnail span" mentre per personalizzare il blocco che contiene l'immagine iniziale (quella piccola) si fa riferimento a "thumbnail".

    Guida all'utilizzo


    Una volta terminato il lavoro preliminare, per richiamare lo stile creato, basta utilizzare in Gestione HTML, un codice del tipo:

    HTML
    <a class="thumbnail" href="#"><img alt="" src="THUMB"><span><img alt="" src="IMAGE"></span></a>


    Nel codice bisogna sostituire THUMB con il link della miniatura (quella che appare normalmente) e al posto di IMAGE inserire il link dell'immagine che deve apparire al passaggio del mouse.

    Risultato



    Nota: sostituisci la parola TESTO nel seguente codice per aggiungere al popup del testo, che verrà visualizzato sotto l'immagine (quella grande), al passaggio del mouse:

    HTML
    <a class="thumbnail" href="#"><img alt="" src="THUMB"><span><img alt="" src="IMAGE">TESTO</span></a>