Kullanılan resimleri indirmek için
tıklayınız.
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Açıklama
Açıklama
Açıklama
Açıklama
Açıklama
Açıklama
Açıklama
Açıklama
<!--- KAYNAK: http://www.gezginler.net ---> <!---<head> Başlangıcı ---> <style type="text/css"> html{ height:100%; } body{ height:100%; margin:0px; padding:0px; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; } /* Entire pane */ #dhtmlgoodies_xpPane{ background-color:#7190e0; /* Blue background color */ float:left; height:100%; width:200px; /* Width of panel */ } #dhtmlgoodies_xpPane .dhtmlgoodies_panel{ margin-left:10px; margin-right:10px; margin-top:10px; } #dhtmlgoodies_xpPane .panelContent{ font-size:0.7em; background-image:url('images/bg_pane_right.gif'); background-position:top right; background-repeat:repeat-y; border-left:1px solid #FFF; border-bottom:1px solid #FFF; padding-left:2px; padding-right:2px; overflow:hidden; position:relative; } #dhtmlgoodies_xpPane .panelContent div{ position:relative; } #dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar{ background-image:url('images/bg_panel_top_right.gif'); background-repeat:no-repeat; background-position:top right; height:25px; padding-right:5px; } #dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar span{ /* Heading text options */ line-height:25px; vertical-align:middle; font-family:arial; /* Arial font */ font-size:0.7em; /* Font size */ color:#215DC6; /* Light blue color */ font-weight:bold; /* Bold font */ padding-left:5px; /* Space at the left */ float:left; /* Don't change this one */ } #dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar img{ float:right; cursor:pointer; } </style> <script type="text/javascript"> /***********(C) www.dhtmlgoodies.com, October 2005 www.dhtmlgoodies.com Alf Magne Kalleland *****/ var xpPanel_slideActive = true; // Slide down/up active? var xpPanel_slideSpeed = 15; // Speed of slide var dhtmlgoodies_xpPane; var dhtmlgoodies_paneIndex; var savedActivePane = false; var savedActiveSub = false; function showHidePaneContent() { var img = this.getElementsByTagName('IMG')[0]; var obj = document.getElementById('paneContent' + img.id.replace(/[^0-9]/g,'')); if(img.src.toLowerCase().indexOf('up')>=0){ img.src = img.src.replace('up','down'); if(xpPanel_slideActive){ obj.style.display='block'; slidePane((xpPanel_slideSpeed*-1),obj.id); }else{ obj.style.display='none'; } }else{ img.src = img.src.replace('down','up'); if(xpPanel_slideActive){ if(document.all){ obj.style.display='block'; obj.style.height = '1px'; } slidePane(xpPanel_slideSpeed,obj.id); }else{ obj.style.display='block'; } } } function slidePane(slideValue,id) { var activePane = document.getElementById(id); if(activePane==savedActivePane){ var subDiv = savedActiveSub; }else{ var subDiv = activePane.getElementsByTagName('DIV')[0]; } savedActivePane = activePane; savedActiveSub = subDiv; var height = activePane.offsetHeight; var innerHeight = subDiv.offsetHeight; height+=slideValue; if(height<0)height=0; if(height>innerHeight)height = innerHeight; if(document.all){ activePane.style.filter = 'alpha(opacity=' + Math.round((height / subDiv.offsetHeight)*100) + ')'; }else{ var opacity = (height / subDiv.offsetHeight); if(opacity==0)opacity=0.01; if(opacity==1)opacity = 0.99; activePane.style.opacity = opacity; } if(slideValue<0){ activePane.style.height = height + 'px'; subDiv.style.top = height - subDiv.offsetHeight + 'px'; if(height>0){ setTimeout('slidePane(' + slideValue + ',"' + id + '")',10); }else{ if(document.all)activePane.style.display='none'; } }else{ subDiv.style.top = height - subDiv.offsetHeight + 'px'; activePane.style.height = height + 'px'; if(height<innerHeight){ setTimeout('slidePane(' + slideValue + ',"' + id + '")',10); } } } function mouseoverTopbar() { var img = this.getElementsByTagName('IMG')[0]; var src = img.src; img.src = img.src.replace('.gif','_over.gif'); var span = this.getElementsByTagName('SPAN')[0]; span.style.color='#428EFF'; } function mouseoutTopbar() { var img = this.getElementsByTagName('IMG')[0]; var src = img.src; img.src = img.src.replace('_over.gif','.gif'); var span = this.getElementsByTagName('SPAN')[0]; span.style.color=''; } function initDhtmlgoodies_xpPane(panelTitles,panelDisplayed) { dhtmlgoodies_xpPane = document.getElementById('dhtmlgoodies_xpPane'); var divs = dhtmlgoodies_xpPane.getElementsByTagName('DIV'); dhtmlgoodies_paneIndex=0; for(var no=0;no<divs.length;no++){ if(divs[no].className=='dhtmlgoodies_panel'){ var outerContentDiv = document.createElement('DIV'); var contentDiv = divs[no].getElementsByTagName('DIV')[0]; outerContentDiv.appendChild(contentDiv); outerContentDiv.id = 'paneContent' + dhtmlgoodies_paneIndex; outerContentDiv.className = 'panelContent'; var topBar = document.createElement('DIV'); var span = document.createElement('SPAN'); span.innerHTML = panelTitles[dhtmlgoodies_paneIndex]; topBar.appendChild(span); topBar.onclick = showHidePaneContent; topBar.onmouseover = mouseoverTopbar; topBar.onmouseout = mouseoutTopbar; var img = document.createElement('IMG'); img.id = 'showHideButton' + dhtmlgoodies_paneIndex; img.src = 'images/arrow_up.gif'; topBar.appendChild(img); if(!panelDisplayed[dhtmlgoodies_paneIndex]){ outerContentDiv.style.height = '0px'; contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px'; if(document.all)outerContentDiv.style.display='none'; img.src = 'images/arrow_down.gif'; } topBar.className='topBar'; divs[no].appendChild(topBar); divs[no].appendChild(outerContentDiv); dhtmlgoodies_paneIndex++; } } } </script> <!---<head> Sonu ---> <div id="dhtmlgoodies_xpPane"> <div class="dhtmlgoodies_panel"> <div> <!-- Start content of pane --> <a href="http://www.gezginler.net" target="_blank">Link</a><br> <a href="http://www.gezginler.net" target="_blank">Link</a><br> <a href="http://www.gezginler.net" target="_blank">Link</a><br> <a href="http://www.gezginler.net" target="_blank">Link</a><br> <a href="http://www.gezginler.net" target="_blank">Link</a><br> <a href="http://www.gezginler.net" target="_blank">Link</a><br> <a href="http://www.gezginler.net" target="_blank">Link</a><br> <a href="http://www.gezginler.net" target="_blank">Link</a><br> <a href="http://www.gezginler.net" target="_blank">Link</a><br> <a href="http://www.gezginler.net">Link</a> <!-- End content --> </div> </div> <div class="dhtmlgoodies_panel"> <div> <!-- Start content of pane --> Açıklama<br> Açıklama<br> Açıklama<br> Açıklama <!-- End content --> </div> </div> <div class="dhtmlgoodies_panel"> <div> <!-- Start content of pane --> Açıklama<br> Açıklama<br> Açıklama<br> Açıklama <!-- End content --> </div> </div> </div> <script type="text/javascript"> /* Arguments to function 1) Array of titles 2) Array indicating initial state of panels(true = expanded, false = not expanded ) */ initDhtmlgoodies_xpPane(Array('Dosyalar','Bilgi','Detaylar'),Array(true,true,false)); </script> <!--- KAYNAK: http://www.gezginler.net --->
Gezginler Webmaster Resources
|
Javascript
|
Web Programming
|
Search Engines and SEO
|
Web Design
|
Web Hosting
-
Free Hosting
