Dem�:

Ha ide hozod az egeret
�RHATSZ IS A K�P AL�! =), akkor l�thattad, megjelenik egy k�p. Ugyanezt megcsin�lhatod k�ppel is, vidd r� az egeret, s megjelenik teljes m�retben:

�RHATSZ IS A K�P AL�! =)

K�t k�dra van sz�ks�g�nk: az egyik egy HTML k�d, amiben megadjuk a sz�veg�nket vagy kisk�p�nket, amire, ha r�vissz�k az egeret, megjelenik a nagy k�p, amit szint�n ebben a k�dban kell megadni, illetve a k�p alatt megjelen� sz�veget is. A k�dban NAGY BET�VEL jel�lt�k, hol mit adj meg, ezeket �rd �t.

Ha sz�veggel szeretn�d:

<a class="thumbnail" href="#thumb">SZ�VEG, AMIN�L MEGJELENIK A K�P<span><img alt="" src="K�P URL-JE, AMI MEGJELENIK POPUP-ban" /><br />
SZ�VEGED, AMI A K�P ALATT JELENIK MEG</span></a>

Ha k�ppel szeretn�d:

<a class="thumbnail" href="#thumb"><img border="0" alt="" width="100" height="70" src="KICSI K�P URL-JE" /><span><img alt="" src="K�P URL-JE, AMI MEGJELENIK POPUP-ban" /><br />
SZ�VEGED, AMI A K�P ALATT JELENIK MEG</span></a>

Megj.: a KICSI K�P URL-n�l megadhat� ugyan�gy a teljes k�p URL-je, ugyanis a width (sz�less�g) �s height (magass�g) megad�s�val kiszabhat�, mekkora is legyen a kicsi k�p.

A m�sik k�d pedig egy CSS k�d, amivel testreszabhatod a felugr� k�p megjelen�t�s�t. Ezt a k�dot nem musz�j ugyanabba a modulba illesztened, ahov� a HTML k�dot rakod. S�t, ha t�bb modulba is rakod a fenti HTML k�dot m�s-m�s k�ppel, akkor c�lszer�bb mindenk�pp jobb/bal oldalra tenni ezt a CSS k�dot, �gy mindenhol ugyan�gy fognak megjelenni a felugr� k�pek. A k�dban a legfontosabb r�szekhez tal�lsz z�r�jeles magyar�zatokat, ezeket nem kell t�r�ln�d, a k�d �gy is m�k�dik.

<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{
position: absolute;
background-color: #FFF8DC;      /* k�p m�g�tti doboz sz�ne */
padding: 5px;      /* k�p m�g�tti doboz m�rete ak�p k�r�l */
left: -1000px; 
border: 1px dashed gray;     /* k�p m�g�tti doboz szeg�lye */
visibility: hidden;
color: black;      /* k�p alatti sz�veg sz�ne */
}

.thumbnail span img{
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{
visibility: visible;
top: 10px;       /* k�p ennyi px-re jelenik meg a sz�veg/k�p tetej�t�l */
left: 60px;       /* k�p ennyi px-re jelenik meg a sz�veg/k�p sz�l�t�l */
}
</style>