Cikkajánló
Több helyen láttam már, ahogy az én G-Portálos oldalamon is, hogy ha úgy használjátok a Blog modult, hogy a főcímet eltüntetitek róla, akkor a szélső modul mindig feljebbről kezdődik,
Megszületett a honlapverseny eredményhirdetése. Az első 3 helyezett sok-sok nyereménnyel lett gazdagabb. Részletes végeredmény nincsen. Akik nem kerültek be az első 3-ba, azok holtversenyben mind a 4. helyen végeztek
Bocsánat, hogy egy ideje nem volt friss, de egy perc időm sem volt az oldalra sajnos :( Remélem most már lassan több időm lesz és akkor hozok több frissítést
Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák Maisie Williams G-Portálos téma
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 147 megtekintés

Hozzászólások