DHTML

Free Web Hosting Provider - Web Hosting - E-commerce - High Speed Internet - Free Web Page

Java applet running here... If you see this message, you aren't using a java-enabled browser,
or your browser preferences are not set to view java applets.

Daha Fazla ve Örnekli DHTML'ler İçin Tıklayın...

DHTML	Açıklama	Kodları
Animasyon Menü	Tıklandığında Beliren Menü	<!-- START OF Drop Down DHTML --> <!-- SUMMARY BRIEFS This DHTML script will create a drop down link box out of an ordinary link. VERY COOL!!!! The top portion of this script goes above the <BODY> tag. The second portion goes where you want the drop down link box to be. --> <style> <!-- #wrapper{ position:relative; height:30px } #wrapper2{ position:absolute } #javadunyasimenu3{ filter:revealTrans(Duration=1.5,Transition=12) visibility:hide } --> </style> <style fprolloverstyle>A:hover {color: #FF0000} </style> </head> <body bgcolor="#000000" text="#FFFFFF"> <ilayer id="Javadunyasimenu1" height=35px> <layer id="Javadunyasimenu2" visibility=show><span id="wrapper2" onClick="dropit2();event.cancelBubble=true;return false"><font face="Verdana"><b><a href="notthisbrowser.html">Menü için tıklayın</a></b></font><span id="wrapper"> </span></span></layer> </ilayer> <script language="JavaScript1.2"> var enableeffect=true var selection=new Array() selection[0]='<font face="ARIAL BLACK"><a href="http://surf.to/javadunyasi">Linkler</a><br>' selection[1]='<a href="http://surf.to/javadunyasi">Link1l</a><br>' selection[2]='<a href="http://surf.to/javadunyasi">Link2</a><br>' selection[3]='<a href="http://surf.to/javadunyasi">Link3</a><br>' selection[4]='<a href="http://surf.to/javadunyasi">Link4r</a><br></font>' if (document.layers) document.Javadunyasimenu1.document.Javadunyasimenu2.visibility='show' function dropit2(){ if (document.all){ javadunyasimenu3.style.left=document.body.scrollLeft+event.clientX-event.offsetX javadunyasimenu3.style.top=document.body.scrollTop+event.clientY-event.offsetY+18 if (javadunyasimenu3.style.visibility=="hidden"){ if (enableeffect) javadunyasimenu3.filters.revealTrans.apply() javadunyasimenu3.style.visibility="visible" if (enableeffect) javadunyasimenu3.filters.revealTrans.play() } else{ hidemenu() } } } function dropit(e){ if (document.javadunyasimenu3.visibility=="hide") document.javadunyasimenu3.visibility="show" else document.javadunyasimenu3.visibility="hide" document.javadunyasimenu3.left=e.pageX-e.layerX document.javadunyasimenu3.top=e.pageY-e.layerY+19 return false } function hidemenu(){ if (enableeffect) javadunyasimenu3.filters.revealTrans.stop() javadunyasimenu3.style.visibility="hidden" } function hidemenu2(){ document.javadunyasimenu3.visibility="hide" } if (document.layers){ document.Javadunyasimenu1.document.Javadunyasimenu2.captureEvents(Event.CLICK) document.Javadunyasimenu1.document.Javadunyasimenu2.onclick=dropit } else if (document.all) document.body.onclick=hidemenu </script> <div id="javadunyasimenu3" style="position: absolute; left: -2; top: -5; layer-background-color: #C0C0C0; background-color: #C0C0C0; width: 200; visibility: hidden; height: 23; border: 2px solid black; padding: 0px"> <script language="JavaScript1.2"> if (document.all) javadunyasimenu3.style.padding='4px' for (i=0;i<selection.length;i++) document.write(selection[i]) </script> </div> <script language="JavaScript1.2"> if (document.layers){ document.javadunyasimenu3.captureEvents(Event.CLICK) document.javadunyasimenu3.onclick=hidemenu2 } </script> <!-- END OF Drop Down DHTML -->
Kaydırma	Sayfayı Aşağı Doğru Kaydırır.	<!-- START OF Rolling Credits DHTML --> <!-- SUMMARY BRIEFS This example shows how you can create a webpage that scrolls up. The webpage must be long (vertically) in order for the effect to work. --> <SCRIPT LANGUAGE="JavaScript"> <!-- var position = 0; function scroller() { if (position != 320) { position++; scroll(0,position); clearTimeout(timer); var timer = setTimeout("scroller()",3); timer; } else { location.replace("#"); } } // --> </SCRIPT> </HEAD> <BODY onload="scroller()"> <CENTER> <font face="VERDANA, ARIAL" size="5" color=804040>Rolling Credits</font><p> <font face="VERDANA, ARIAL" size="4">This script allows you to: <HR WIDTH=350 NOSHADE> <P> Place<P> text<P> descriptions<p> of <P>any <P>sort<p> and it will <P>scroll up<p> the page <P>until its done.<p> <P> You can even<P> make <A HREF="http://www.coffeecup.com/">Links.</A><p> Or<P> use<P> images.<p> <p></font> </CENTER> <!-- END OF Rolling Credits DHTML -->
Mesaj Menü	Menü Mesajlar Halinde Sırayla Geçiyor.	<!-- START OF Message Reader DHTML --> <!-- SUMMARY BRIEFS This DHTML script will cycle through 4 different text links. You can adjust the text and links below to meet your webpage. IMPORTANT Make suer that this body tag is included in your webpage. It activates the Message Reader. --> <body onload="if (document.all\|\|document.layers) {regenerate2();update()}"> <style> <!-- #msgline{ position:relative; layer-background-color:black; width:400; height:12; } #msgtext{ background-color:black; position:absolute; border: 1px solid black; width:400; height:12; } .msgtextfont{ font:bold 16px Arial; postition:absolute; left:5px; text-decoration:none; color:white; } .msgtextfont a{ color:white; text-decoration:none; } --> </style> <div id="msgline"> <div id="msgtext" class="msgtextfont">Starting Messages...</div> </div> <script language="JavaScript1.2"> var speed=4000 var news=new Array() news[0]="<a href='http://surf.to/javadunyasi'>First line of text....</a>" news[1]="<a href='http://surf.to/javadunyasi'>Second line of text....</a>" news[2]="<a href='http://surf.to/javadunyasi'>Third line of text....</a>" news[3]="<a href='http://surf.to/javadunyasi'>Add as many as you want....</a>" i=0 if (document.all) tickerobject=document.all.msgtext.style else tickerobject=document.msgline.document function regenerate(){ window.location.reload() } function regenerate2(){ if (document.layers) setTimeout("window.onresize=regenerate",450) } function update(){ BgFade(0xff,0xff,0xff, 0x00,0x00,0x00,10); if (document.layers){ document.msgline.document.msgtext.document.write('<span class="msgtextfont">'+news[i]+'</span>') document.msgline.document.msgtext.document.close() } else document.all.msgtext.innerHTML=news[i] if (i<news.length-1) i++ else i=0 setTimeout("update()",speed) } function BgFade(red1, grn1, blu1, red2, grn2, blu2, steps) { sred = red1; sgrn = grn1; sblu = blu1; ered = red2; egrn = grn2; eblu = blu2; inc = steps; step = 0; MsgDither(); } function MsgDither() { var epct = step/inc; var spct = 1 - epct; if (document.layers) tickerobject.bgColor = Math.floor(sred * spct + ered * epct)256256 + Math.floor(sgrn * spct + egrn * epct)256 + Math.floor(sblu spct + eblu * epct); else tickerobject.backgroundColor= Math.floor(sred * spct + ered * epct)256256 + Math.floor(sgrn * spct + egrn * epct)256 + Math.floor(sblu spct + eblu * epct); if ( step < inc ) { setTimeout('MsgDither()',50); } step++; } </script> <!-- END OF Message Reader DHTML -->
Menü	Değişik Bir Menü Örneği	<style> <!-- DIV.clTop{position:absolute; width:170} DIV.clSub{position:absolute; left:10; width:170} #divCont{position:relative; left:100; top:0; height:400; width:170;} A.clMain{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; font-weight:bold; color:black} A.clSubb{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; color:black} #divMain{position:absolute} //--> </style> <script language="JavaScript"> /****************************************************************************** Copyright (C) 1999 Thomas Brattli This script is made by and copyrighted to Thomas Brattli at www.bratta.com Visit for more great scripts. This may be used freely as long as this msg is intact! ****************************************************************************/ /******************************************************************************** This script is a "foldout" menu script, all the "foldouts" will stay outfolded in older browsers. Works in ie4+ and ns4+. To change where the menu appears change the left and top values of the divCont in the stylesheets, it's currently placed relative so you can place this menu in tables or similar if you want. Change the text colors and size in the A.clMain and A.clSubb classes. ********************************************************************************/ /******************************************************************************** Change this to false if you want all the submenus to get unfold when you foldout a new one. ********************************************************************************/ var stayFolded=false /******************************************************************************** Browsercheck ********************************************************************************/ var n = (document.layers) ? 1:0; var ie = (document.all) ? 1:0; var browser=((n \|\| ie) && parseInt(navigator.appVersion)>=4) /******************************************************************************** Making cross-browser objects ********************************************************************************/ function makeMenu(obj,nest){ nest=(!nest) ? '':'document.'+nest+'.' this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style') this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document'); this.height=n?this.ref.height:eval(obj+'.offsetHeight') this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop; this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt return this } function b_showIt(){this.css.visibility="visible"} function b_hideIt(){this.css.visibility="hidden"} function b_vis(){if(this.css.visibility=="hidden" \|\| this.css.visibility=="hide") return true;} function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y} /******************************************************************************** Initiating the page. Just add to the arrays here to get more menuitems and add divs in the page ********************************************************************************/ function init(){ oTop=new Array() oTop[0]=new makeMenu('divTop1','divCont') oTop[1]=new makeMenu('divTop2','divCont') oTop[2]=new makeMenu('divTop3','divCont') oTop[3]=new makeMenu('divTop4','divCont') oTop[4]=new makeMenu('divTop5','divCont') oTop[5]=new makeMenu('divTop6','divCont') oSub=new Array() oSub[0]=new makeMenu('divSub1','divCont.document.divTop1') oSub[1]=new makeMenu('divSub2','divCont.document.divTop2') oSub[2]=new makeMenu('divSub3','divCont.document.divTop3') oSub[3]=new makeMenu('divSub4','divCont.document.divTop4') oSub[4]=new makeMenu('divSub5','divCont.document.divTop5') oSub[5]=new makeMenu('divSub6','divCont.document.divTop6') for(i=0;i<oSub.length;i++){ oSub[i].hideIt() } for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) } } /******************************************************************************** This is the function that changes the sub menus to folded or unfolded state. ********************************************************************************/ function menu(num){ if(browser){ if(!stayFolded){ for(i=0;i<oSub.length;i++){ if(i!=num) oSub[i].hideIt() } for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) } } oSub[num].vis()?oSub[num].showIt():oSub[num].hideIt() for(i=1;i<oTop.length;i++){ if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height) else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) } } } //Initiating the menus onload, if it's a 4.x+ browser. if(browser) onload=init; </script> </HEAD> <BODY bgcolor="white"> <!--******************************************************************************** Replace your links with the # inside the a tags to get links. **********************************************************************************--> <div id="divCont"> <div id="divTop1" class="clTop"><a href="#" onclick="menu(0); return false" class="clMain">[choice 0]</a><br> <div id="divSub1" class="clSub"> <a href="#" class="clSubb">-Sub 1</a><br> <a href="#" class="clSubb">-Sub 2</a><br> <a href="#" class="clSubb">-Sub 3</a><br> <a href="#" class="clSubb">-Sub 4</a><br> </div><br> </div> <div id="divTop2" class="clTop"><a href="#" onclick="menu(1); return false" class="clMain">[choice 1]</a><br> <div id="divSub2" class="clSub"> <a href="#" class="clSubb">-Sub 1</a><br> <a href="#" class="clSubb">-Sub 2</a><br> </div><br> </div> <div id="divTop3" class="clTop"><a href="#" onclick="menu(2); return false" class="clMain">[choice 2]</a><br> <div id="divSub3" class="clSub"> <a href="#" class="clSubb">-Sub 1</a><br> <a href="#" class="clSubb">-Sub 2</a><br> <a href="#" class="clSubb">-Sub 3</a><br> </div><br> </div> <div id="divTop4" class="clTop"><a href="" onclick="menu(3); return false" class="clMain">[choice 3]</a><br> <div id="divSub4" class="clSub"> <a href="#" class="clSubb">-Sub 1</a><br> <a href="#" class="clSubb">-Sub 2</a><br> </div><br> </div> <div id="divTop5" class="clTop"><a href="" onclick="menu(4); return false" class="clMain">[choice 4]</a><br> <div id="divSub5" class="clSub"> <a href="#" class="clSubb">-Sub 1</a><br> <a href="#" class="clSubb">-Sub 2</a><br> <a href="#" class="clSubb">-Sub 3</a><br> <a href="#" class="clSubb">-Sub 4</a><br> <a href="#" class="clSubb">-Sub 5</a><br> </div><br> </div> <div id="divTop6" class="clTop"><a href="" onclick="menu(5); return false" class="clMain">[choice 5]</a><br> <div id="divSub6" class="clSub"> <a href="#" class="clSubb">-Sub 1</a><br> </div><br> </div> </div>
Zoom Mesage	Koyduğunuz Yerde Yaklaşan Bir Yazı Çıkar.	<!-- START OF Zoom Message DHTML --> <!-- SUMMARY BRIEFS This example shows how you can create a webpage that displays lines of text that appear to be flying out of the webpage. Our example has an image. IMPORTANT The image used in this example can be found in the . You do not need an image for it to work. --> <style type="text/css"> body { background-color:#FFFFFF; font-family: Arial; font-size:10pt; } </style> <script> //<!--Change this text--> text=new Array('Belesh','Web','java','dünyası') //<!--This is the number of words in your message--> var numText=4 //<!--These are the colors the last word will fade to. The first color is the main color.--> color=new Array('#000000','#2F2F2F','#4F4F4F','#7F7F7F','#408080') //<!--This is the total number of colors from above.--> var numColors=5 //<!--This is the size you want the zoom to end at.--> var endSize=70 //<!--This is the speed you want it to zoom in.--> var Zspeed=30 //<!--This is the speed the colors will fade.--> var Cspeed=200 //<!--This is the font of the fade in message.--> var font='Arial Black' //<!--This will allow you to have the message stay or go. True will make it go. // False will make it stay.--> var hide=false var size=10 var gonum=0 var ie, n; if (document.all) { n=0 ie=1 zoomText='document.all.zoom.innerText=text[num]' zoomSize='document.all.zoom.style.fontSize=size' closeIt="" fadeColor="document.all.zoom.style.color=color[num]" } if (document.layers) { n=1;ie=0 zoomText="" zoomSize="document.zoom.document.write('<p align=\"center\" style=\"font-family:'+font+'; font-size:'+size+'px; color:'+color[0]+'\">'+text[num]+'</p>')" closeIt="document.zoom.document.close()" fadeColor="document.zoom.document.write('<p align=\"center\" style=\"font-family:'+font+'; font-size:'+endSize+'px; color:'+color[num]+'\">'+text[numText-1]+'</p>')" } function zoom(num,fn){ if (size<endSize){ eval(zoomText) eval(zoomSize) eval(closeIt) size+=5; setTimeout("zoom("+num+",'"+fn+"')",Zspeed) }else{ eval(fn); } } function fadeIt(num){ if (num<numColors){ eval(fadeColor) eval(closeIt) num+=1; setTimeout("fadeIt("+num+")",Cspeed) }else{ hideIt() } } function hideIt(){ if(hide){ if(ie)document.all.zoom.style.visibility="hidden" if(n)document.layers.zoom.visibility="hidden" } } function init(){ if(ie){ document.all.zoom.style.color=color[0] document.all.zoom.style.fontFamily=font } if(ie \|\| n) go(0) } function go(num){ gonum+=1 size=10 if(num<numText){ zoom(num,'go('+gonum+')') }else{ fadeIt(0) } } </script> </head> <body onload="init()" bgcolor="FFFFFF"> <CENTER></CENTER><P> <div id="zoom" align="center" style="position:absolute; top:150"> </DIV> <!-- END OF Zoom Message DHTML -->


	Daha Fazla ve Örnekli DHTML'ler İçin Tıklayın...