Cikkajánló
Mostanában nagy divat lett a dupla aláhúzás a modulfejlécekben. Minden aláhúzás más színű általában. A legtöbb helyen ezt .png képpel oldjátok meg, de simán CSS kóddal is meglehet csinálni,
A hétvégén megcsináltam 4 darab rendelést. Kettőt G-Portálra és kettő darab Coppermine Galéria kinézetet is készítettem. Így a rendelés megint nyitva van. Igaz van még függőben 1-2 rendelés, de
A Képes üdvözlő szövegdoboz után elhoztam a másik nagy népszerűségnek örvendő szövegdobozt is. Ez a Képes project szövegdoboz. Ebbe írható például leírás a kedvenceitek aktuális munkálatairól vagy ismertető egy
Sosugary Gallery | Jennifer Lawrence téma Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló
Buborékszöveg elite cseréknél

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>

lindadesign Hozzászólások
1 202 megtekintés

Hozzászólások