Kategorisiz HTML ipuçları ve kısayolları

Ekranınızı 1024x768 çözünürlüğe ayarlamanız önerilir

Sık Kullanılanlar menusune eklemek için tıklayın

Korfez.net'i İnternete başlangıç sayfası yapmak için tıklayın

Sürükle-bırak

Benim başım kel mi??! Beni de sürükle buradan! Hadi Sürükle Beni!!

Bir tane daha büyük merak konusu javascript de burada. Hepimiz sürükle-bırak tabakaların nasıl çalıştığını merak etmişizdir. gördüğünüz gibi gayet kolay. Yapmanız gereken birinci text-area'daki kodu sayfanızın <HEAD></HEAD> etiketleri arasına yerleştirmek. Sonra ikinci text-area'daki kodu ise <BODY>etiketinden sonra yerleştirmek. Biraz alıştırma ve sabır ile tabakaların yerinide değiştirebilirsiniz.

<style> #divDrag0{position:absolute; left:0; top:0; height:200; width:200; clip:rect(0,200,200,0); background-color:silver; layer-background-color:silver} #divDrag1{position:absolute; left:0; top:0; height:200; width:200; clip:rect(0,200,200,0); background-color:blue; layer-background-color:blue} #divDrag2{position:absolute; left:0; top:0; height:100; width:100; clip:rect(0,100,100,0); background-color:green; layer-background-color:green} </style> <script language="JavaScript1.2"> /******************************************************************************** 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! ********************************************************************************/ //Browsercheck, and sets <div> for ie, and <layer> for ns var n = (document.layers) ? 1:0; var ie = (document.all) ? 1:0; var layer=(n)?'layer':'div' /******************************************************************************** Object constructor part. Setting the objects methods and properties ********************************************************************************/ function dragObj(obj,nest){ nest=(!nest) ? '':'document.'+nest+'.' this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style') this.evnt=(n)? eval(nest+'document.'+obj):eval(obj); this.getLeft=b_getLeft; this.getTop=b_getTop; this.moveIt=b_moveIt; this.name=obj return this } function b_moveIt(x,y){ this.css.left=x this.css.top=y } function b_getLeft(){ x=(n)? this.css.left:this.css.pixelLeft return x } function b_getTop(){ y=(n)? this.css.top:this.css.pixelTop return y } /******************************************************************************** Capturing events, when the user mouseovers a layer the variable/property of that layer names .isOver will be true, and that means if the user clicks when he is on top of that layer it becomes draggable ********************************************************************************/ function dragInit(){ if(n) document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP) document.onmousedown=mdown document.onmouseup=mup document.onmousemove=mmove; } function mmover(num){ if(loaded) oDrag[num].isOver=true } function mmout(num){ if(loaded) oDrag[num].isOver=false } function mup(){ for(var i=0; i<oDrag.length;i++){ if(oDrag[i].isOver) { oDrag[i].drag=false } } } function mdown(num){ x=(n)?num.pageX:event.x y=(n)?num.pageY:event.y for(var i=0; i<oDrag.length;i++){ if(oDrag[i].isOver) { oDrag[i].drag=true oDrag[i].clickedX=x-oDrag[i].getLeft() oDrag[i].clickedY=y-oDrag[i].getTop() cZIndex++ oDrag[i].css.zIndex=cZIndex } } } function mmove(e){ x=(n)?e.pageX:event.x y=(n)?e.pageY:event.y for(var i=0; i<oDrag.length;i++){ if(oDrag[i].drag) oDrag[i].moveIt(x-oDrag[i].clickedX,y-oDrag[i].clickedY) } } /******************************************************************************** Init, here's where you set how many draggable layers you want. Make one more "Drag[3]=new dragObj('divDrag3')" and as i did here, ++ the number to add draggable layers. You also have to add them in the stylesheet (in the <style></style>) To make another one that's sized 100*200 and with a background-color of red add this: #divDrag3{position:absolute; height:100; width:200; clip:rect(0,200,100,0); background-color:red; layer-background-color:red} Get the picture? There's one more thing you have to do to add layers, look further down for explanation. ********************************************************************************/ var loaded; function init(){ dragInit() oDrag=new Array() oDrag[0]=new dragObj('divDrag0') oDrag[1]=new dragObj('divDrag1') oDrag[2]=new dragObj('divDrag2') loaded=true; } /******************************************************************************** Set this variable to the zIndex you want it to start at, (if you have several layers and want it to start on the top, change to somthing higher then the uppermost layer ********************************************************************************/ cZIndex=10 //Inits the page on page load if(n || ie) onload=init; </script>

Aşağıdaki kodu <BODY> etiketinden sonra yerleştireceksiniz.

 <script language="JavaScript1.2">document.write('<'+layer+' id="divDrag0" onmouseover="mmover(0)" onmouseout="mmout(0)">')</script> Benim başım kel mi??! <script language="JavaScript1.2">document.write('</'+layer+'>')</script> <script language="JavaScript1.2">document.writeln('<'+layer+' id="divDrag1" onmouseover="mmover(1)" onmouseout="mmout(1)">')</script> Beni de sürükle buradan! <script language="JavaScript1.2">document.writeln('</'+layer+'>')</script> <script language="JavaScript1.2">document.writeln('<'+layer+' id="divDrag2" onmouseover="mmover(2)" onmouseout="mmout(2)">')</script> Hadi Sürükle Beni!! <script language="JavaScript1.2">document.writeln('</'+layer+'>')</script>

ALIŞVERİŞ
BASIN VE YAYIN

BAŞVURU
BİLİM

BİLGİSAYAR
EĞİTİM

EKONOMİ VE İŞ
EĞLENCE

KÜLTÜR-SANAT
SAĞLIK

4920 Türkçe websitesini sizin için derledik