Eredeti neve Tooltip. Demo látható az Elit Affiliates modulomban. Biztos láttál már olyat, ha a kép fölé vitted az egeret, akkor kiírt információkat az elit cseréknél például. De a kód más képekhez is hozzárendelhető. Egyszerűen azoknak a képeknek a linkelése kicsit eltér a megszokott sima linkeléstől.

HTML/PHP oldalon: Ezt a kódot kell bemásolnod oldalad HEAD részébe. A .js fájlt mentsd le, töltsd fel a tárhelyedre és cseréld le a kódban az URL címet.
 

<script type="text/javascript" src="/js/tooltip.js"></script>

G-Portálon: A .js fájlt te is mentsd le, töltsd fel a Médiatárba és az ott kapott url címet írd be a kódba a kiemelt url rész helyére. Aztán a kódokat az egyszerű modulod forráskód nézetébe kell bemásolnod. Forráskódban linkeld a képeket is majd a következő lépésben!
 

A .js fájl lementése itt: tooltip.js

A képek linkelése
Miután beillesztetted a .js fájlt az oldaladba, most linkeljünk be egy képet úgy, hogy ha ráviszed az egeret, akkor felugorjon a buborékszöveg. Mint látjátok a 2. linkelés után tettem egy <br> kódot. Ez a sortörés. Általában a 6-7 kép után kell tenni, de legjobban attól függ, hogy milyen széles a szélső modulod. A sortöréssel tudsz egymás alá több sorban képeket tenni. Nem kell táblázatot használni hozzá.
Az img src="/images/affiliates/affi.png" részhez jönnek a képek url címei. A képeket előtte természetesen fel kell töltened a tárhelyedre és az ott kapott URL címet írd be az én URL címem helyére. A width értékhez a képed szélességét kell megadnod.
 

<center>
<a href="ide jön a csere oldal címe"target="_blank"onmouseout="hideddrivetip()" onmouseover="ddrivetip('Jelentkezz')"><img src="/images/affiliates/affi.png" alt="" width="40" class="csere"/></a></a>
<a href="ide jön a csere oldal címe"target="_blank"onmouseout="hideddrivetip()" onmouseover="ddrivetip('Jelentkezz')"><img src="/images/affiliates/affi.png" alt="" width="40" class="csere"/></a></a><br>
</center>

CSS kód a felugró buborékszöveghez
Ezzel a kóddal tudod teljesen átalakítani a felugró buborékszöveget, hogy hogyan nézzen ki.
 

<style type="text/css">
#dhtmltooltip{ /* csere képeknél a felugró szöveg */
    font-family: Helvetica, Arial, sans-serif;
    font-size: 11px;
    color: #E5D438;
    text-align: center;
    background-color: #000000;
    visibility: hidden;
    z-index: 100;
    position: absolute;
    width: 120px;
    padding: 5px;
}
</style>

1 915 megtekintés