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>