Web sayfalarında bazen bazı resimlerin veya tabloların gizlenmesini istiyebilirsiniz. Sayfanızda büyük bir resim olduğunu düşünün. Bu resmi sayfa ilk gösterildiği zaman görüntelemeyebilirsiniz. Kullanıcı göster link'ine tıklayınca resim gözükür hale gelir. Gizlemek içince gizle link'ine tıklar. Yine bazı sayfalarda örnek kodlar gizlenebilir. Kullanıcı göster linkini tıklanınca kod gösterilir. Bazı siteler bunun yerine bir link koyuyor. Bu link tıklandığında resim veya kod parçası popup pencerede gösteriliyor. Popuplarla uğraşmak hoş olmuyor.
1 <html> 2 <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> 3 function hide(id){
4 var divObject=document.getElementById(id);
5 divObject.style.display="none";
6 }
7 function show(id){
8 var divObject=document.getElementById(id);
9 divObject.style.display="block";
10 }
11 </SCRIPT> 12 <body> 13 <table><tr><td><a href="javascript:hide('test')">Gizle</a></td><td><a href="javascript:show('test')">Göster</a></td></tr></table> 14 <div id="test"><img src="test.gif"></img><br>Burada hem resim var hem yazı. Burada hem resim var hem yazı Burada hem resim var hem yazı Burada hem resim var hem yazı Burada hem resim var hem yazı Burada hem resim var hem yazı Burada hem resim var hem yazı Burada hem resim var hem yazı</div> 15 </body> 16 </html>
gizlenecek/gösterilecek div'e bir id'i verilmelidir. Gizle ve Göster link'leri bu div'in hemen üstüne konulmuştur. Bu linkl'ler hide() ve show() fonksiyonlarını çağırmaktadır. hide fonksiyonu verilen id'li nesneyi bulur.
var divObject=document.getElementById(id);
getElementById(id) methodu verilen id'li element'i sana vermektedir. Bu fonksiyonu IE6.0,Netscape 7 ve Mozilla desteklemektedir.
