Cikkajánló
Mivel egy ideje nem sok friss volt az oldalon így hoztam pár dolgot. 3 féle .psd fejlécet készítettem a napokban, plusz elhoztam a kivágott képeket is, amiket felhasználtam a
Elérkeztünk a honlapverseny első fordulójához. Itt most azokra a honlapokra lehet szavazni február 28-ig, akik nem kerültek be az első 10 oldal közé. A legtöbb szavazatot kapó oldal 100
Sikeresen összedobtam még egy G-Portálos témát, mert most egy pár napig nem nagyon leszek elérhető sajnos. Gondolkodtam, hogy fizetős legyen-e, de aztán a francokat :D Használjátok egészséggel! Azt eddig
Prémium téma | Zendaya Coleman G-Portálos téma 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
Képváltó kód 04.

 

Javascript kódok
A .js fájlokat töltsétek le, majd töltsétek fel a tárhelyetekre, az URL címét pedig cseréljétek le a kódban. Kiemeltem az URL részt a Javascript kódban.
G-Portálosoknak: A .js fájlokat oldaladon a Médiatárba töltsd fel!
kepvalto-fejlec-script-04.js, kepvalto-fejlec-script-04-01.js, kepvalto-fejlec-script-04-02.js
Akkor lesz szép a script, ha minden képed egyforma nagyságú!!!
Itt a javascript kódban azt emeltem ki, hogy hol kell kicserélned a képedre az enyémet. Az az, hova illeszd be a saját képed url címét.
 

<script src="/js/kepvalto-fejlec-script-04.js"></script>
<script src="/js/kepvalto-fejlec-script-04-01.js"></script>
<script src="/js/kepvalto-fejlec-script-04-02.js"></script>


Képváltó kódja
 

<div id="keret">
    <div id="tabs-wrapper">
        <div id="next">
        </div>

 

        <div id="prev">
        </div>

        <div id="tabs">
            <div class="tab">
                <a href="/"><img src="/images/scripts/kepvalto-fejlec/04/001.jpg" title="A képváltó fejléc script leírását a képre kattintva olvashatod" /></a>
            </div>

            <div class="tab">
                <a href="/"><img src="/images/scripts/kepvalto-fejlec/04/002.jpg" title="A képeket be is tudod linkelni egyesével külön-külön" /></a>
            </div>

            <div class="tab">
                <a href="/" target="_blank"><img src="/images/scripts/kepvalto-fejlec/04/003.jpg" title="A képek alá információt is tudsz írni az adott menüpontról" /></a>
            </div>

            <div class="tab">
                <a href="/"><img src="/images/scripts/kepvalto-fejlec/04/004.jpg" title="A többi képváltó fejléc script-et itt találod" /></a>
            </div>

           <div class="tab">
                <a href="/"><img src="/images/scripts/kepvalto-fejlec/04/005.jpg" title="G-Portál-os leírások az alapoktól a haladó szintig itt olvasható" /></a>
            </div>
        </div>
<div class="clear"></div>
<div class="title"></div>
    </div>
</div>


CSS kód
A nyilakat is mentsd le, majd töltsd fel a tárhelyedre és a CSS kódban cseréld le az URL címeket.


   
 

<style type="text/css">
div.clear { clear:both }
div#keret {
    width: 500px; /* képed szélessége */
    margin: auto;
    border: 0px;
}
div#tabs-wrapper {
    width: 500px; /* képed szélessége */
    height: 300px; /* képed magassága */
    overflow: hidden;
}
div#tabs { position: relative }
div#tabs .tab {
    width: 500px; /* képed szélessége */
    height: 300px; /* képed magassága */
    float: left;
}
div#tabs-wrapper .title {
    color: #897b2e; /* szöveg színe az info sávban */
    padding: 5px;
    text-align: center; /* szöveg elhelyezkedése */
    position: relative;
    top: -50px; /* sáv helyzete felfelé */
    font-family: georgia; /* szöveg betűtípusa */
    font-size: 11px; /* szöveg betűmérete */
    background-color: #d7cb89; /* sáv háttérszíne */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"
}
div#next,
div#prev { /* nyilacskák CSS-e */
    width: 30px;
    height: 30px;
    background-image: url('/images/scripts/kepvalto-fejlec/04/nyil-jobbra.png');
    position: absolute;
    z-index: 2;
    margin-top: 135px;
    cursor: pointer;
}
div#next {
  margin-left: 500px /* képed szélessége */
}
div#prev {
background: url('/images/scripts/kepvalto-fejlec/04/nyil-balra.png');
    margin-left: -30px
}
--></style>

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

Hozzászólások