Tabbladen

JavaScripts knippen en plakken

Op deze website vind je javascripts die je door eenvoudig knippen en plakken aan jouw site kunt toevoegen.

Home CSS DHTML Forum E-mail Sitezoeker Links

Tabbladen

1. Kopieer deze code en plaats ze in het HEAD-gedeelte van je pagina :

.tabbladen
 {
  position:          absolute;
  background:        #CCCCCC;
  border-style:      outset;
  border-width:      1;
  padding:           4 4 4 4;
  visibility:        hidden;
  z-index:           0;
 }

.tabinhoud
 {
  background:        #CCCCCC;
  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:             17;
  height:            17;
 }

</style>

var inhoud = new Array(
'Tab 1', '../pics/foto1.jpg', '<br><center>Dit is een voorbeeld van een tabblad.</center>',
'Tab 2', '../pics/foto2.jpg', '<br><center>Je kunt alle html-codes gebruiken.</center>',
'Tab 3', '../pics/foto3.jpg', '<br><center>Afmetingen en kleuren kies je zelf.</center>',
'Tab 4', '../pics/foto4.jpg', '<br><center>Het aantal tabbladen is onbeperkt.</center>',
'Tab 5', '../pics/foto5.jpg', '<br><center>Eenvoudig toe te passen.</center>'
)

var vanaf_links =   250;
var vanaf_boven =   160;
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>

2. Plaats binnenin de BODY-tag: <body onload="setup()">

3. Kopieer deze code en plaats ze in het BODY-gedeelte van je pagina :

Copyright: Het internet is van iedereen, de volledige inhoud van deze site kan door iedereen vrij gebruikt worden.