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>

1 728 megtekintés