Tabbladen maken

Tabbladen maken

Erg makkelijk en ruimtebesparend script, hiermee kun je heel simpel tabbladen maken, in jouw stijl !

Plaats onderstaande code tussen de headtags van je pagina:
<style> .tabs { position: absolute; height: 25; background: #999999; border-style: outset; border-width: 1; border-bottom: 0; font-family: ms sans serif; font-size: 12; color: black; padding: 4 1 1 1; cursor: default; } .niet_aangeklikt { position: absolute; filter: DropShadow(Color=InactiveCaptionText,OffX=1,OffY=1,enabled=true) gray(); } .tabbladen { position: absolute; background: #000000; border-style: outset; border-width: 1; padding: 4 4 4 4; visibility: hidden; z-index: 0; } .tabinhoud { background: #FFFFCC; width: 100%; height: 100%; border-style: inset; border-width: 1; font-family: ms sans serif; font-size: 12; color: black; padding: 2 2 2 2; } .afbeeldingen { width: 20; height: 20; } </style> <script language="JavaScript" type="text/javascript"> var inhoud = new Array( 'Tab 1', '1.jpg', '<br><center>Dit is een voorbeeldje van het tabblad. Klik op tab 1, tab 2 etc</center>', 'Tab 2', '2.jpg', '<br><center>Je kunt alle html-codes gebruiken die je zelf wilt.</center>', 'Tab 3', '3.jpg', '<br><center>Afmetingen en kleuren kun je ook zelf bepalen natuurlijk.</center>', 'Tab 4', '4.jpg', '<br><center>Het aantal tabbladen is onbeperkt.</center>', 'Tab 5', '5.jpg', '<br><center>Je kunt ook afbeeldingen toepassen.<br><img src="5.jpg"></center>' ) var vanaf_links = 25; var vanaf_boven = 25; var kaartbreedte = 500; var kaarthoogte = 250;  var aantal_kaarten = inhoud.length / 3; var tabbreedte = kaartbreedte / aantal_kaarten; var tabboven = vanaf_boven - 22; var tablinks = vanaf_links; var z_index = aantal_kaarten; var bouwer = ""; var teller = 0; function setup() { for(a=0;a<aantal_kaarten;a++) { bouwer+='<div class="tabbladen" id="folder_'+a+'" style="top:'+vanaf_boven+';left:'+vanaf_links+';width:'+kaartbreedte+';height:'+kaarthoogte+';"><div class="tabinhoud">'+inhoud[teller+2]+'</div></div><div class="tabs" id="tab_'+a+'" style="top:'+tabboven+';left:'+tablinks+';width:'+tabbreedte+';" onclick="activate(\''+a+'\')"><div id="dis_'+a+'" class="niet_aangeklikt"> <img src="'+inhoud[teller+1]+'" class="afbeeldingen" align="absmiddle"> '+inhoud[teller]+'</div></div>'; tablinks += tabbreedte; teller+=3; } tabbladen.innerHTML = bouwer; tabbladen.style.left = (document.body.offsetWidth / 2) - (kaartbreedte) activate('0'); } function activate(item) { for(a=0;a<aantal_kaarten;a++) { z_index--; eval("folder_"+a).style.visibility = 'hidden'; eval("folder_"+a).style.zIndex = z_index; eval("tab_"+a).style.zIndex = z_index; eval("tab_"+a).style.top = tabboven; eval("dis_"+a).style.color = 'graytext'; eval("dis_"+a).filters[0].enabled = true; eval("dis_"+a).filters[1].enabled = true; } eval("folder_"+item).style.visibility = 'visible'; eval("folder_"+item).style.zIndex = aantal_kaarten + 1; eval("tab_"+item).style.zIndex = aantal_kaarten + 1; eval("tab_"+item).style.top = tabboven - 1; eval("dis_"+item).style.color = ''; eval("dis_"+item).filters[0].enabled = false; eval("dis_"+item).filters[1].enabled = false; } </script>

Voeg een stukje toe in je bodytag, zoals:
<body onload="setup()">

Onderstaand gedeelte plaats je tussen de bodytags van je pagina:
<div id="tabbladen" style="position:absolute;left:0;"></div>

Voeg je eigen afbeeldingen in die je weer wilt geven bovenin het vak.