CSS Popup Image Viewer

Ultimamente, frequentando il supporto di forumfree, ho notato che molti user richiedono codici e delle guide per mettere le famose "immmagini dello staff che si ingrandiscono quando ci passi sopra con il mouse in bacheca".
Ho deciso quindi di fare una guida semplice che fornisca questo codice e spieghi come modificarlo.
Per prima cosa, per poter visualizzare correttamente il codice HTML, è necessario inserire tra i CCS del forum (in modifica colori e stili su forumfree) questo codice :

CODICE

.originale {position: relative; z-index: 0}
.originale:hover {background-color: transparent; z-index: 9}
.originale span {position: absolute; background-color: #969696; padding: 5px; right: 0; display: none; border: 3px solid #000000; visibility: hidden; color: #FFFFFF; text-decoration: none; font-weight: bold}
.originale span img {border-width: 0; padding: 2px}
.originale:hover span {visibility: visible; top: 10px; display: block; width: 190px; left: 15px}

Questo codice oltre che permettere la visualizzazione del popup è molto importante perchè è qui che si va a modificare esso a proprio piacimento.
Potete difatti modificare la grandezza della cornice ed il colore di essa, il colore di sfondo e quello dei font e aggiungere anche altre particolari caratteristiche.
E' piuttosto semplice modificare tale codice, se volete per esempio modificare il colore del background andate a modificare il colore, inserendo l' html del colore desiderato qui :

CITAZIONE

.originale span {position: absolute; background-color: #969696;

Non dovreste comunque trovare grosse difficoltà nelle modifiche del popup date che il seguente codice come potete constatare non è affatto complesso.

Dopo aver completato l' inserimento del codice nei CCS si può passare all' HTML, andate dunque in "gestione HTML" su forumfree e inserite questo codice :

CODICE

<a class="originale" href="LINK PROFILO STAFFER"><img src="LINK SMALL PICTURE" border="0" height="50" width="16">
<img src="LINK BIG PICTURE"> ¬Nick : ||
 Ruolo staffer</a>

Sostituite dunque i vari link con le immagini che desiderate mettere, inserite i dati dell' user in questione ed è fatta, il vostro codice HTML dovrebbe apparirvi funzionante in bacheca.
In caso vogliate utilizzare tale popup per un sito web (dato che questa guida è fatta per l' inserimento del codice all' interno di un forum), vi fornisco un codice preso dal sito Dynamic Drive :
Ecco quello per i CCS :

SPOILER (click to view)

CODICE

Ed ecco invece l' HTML :

SPOILER (click to view)

CODICE

<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><img src="media/tree.jpg" /> Simply beautiful.</a>

<a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><img src="media/ocean.jpg" /> So real, it's unreal. Or is it?</a>

 
 

<a class="thumbnail" href="#thumb">Dynamic Drive<img src="media/dynamicdrive.gif" /> Dynamic Drive</a> 
<a class="thumbnail" href="#thumb">Zoka Coffee<img src="media/zoka.gif" /> Zoka Coffee</a>

Spero di essere stato utile e di non aver creato un doppio topic in caso questa guida fosse già presente.

Guida by J a g a

Web

dragonknight

Posted on 24/4/2009, 12:08

User deleted

grazie mille ^^
imparoooooooooooooooo

Lolus Alcarin

Posted on 3/8/2009, 08:26

User deleted

scusa, ma dove si modificano le dimensioni delle immagini piccole?
A me vengono tutte schiacciate :??:

2 replies since 4/4/2009, 09:18 212 views