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>
2 036 megtekintés