JavaScript ile farenin pozisyonunu öğrenmek için gerçekleşen olayın clientX ve clientY özellikleri kullanılmaktadır.
Aşağıdaki örnekte tarayıcı ekranında fare hareket ettirildikçe farenin konumunu ekrandaki div etiketlerine yazdıran uygulama örneği mevcuttur.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>YAZILIM BİLİŞİM</title> </head> <style> .konum{ width: 250px; height: 50px; line-height: 50px; font-size: 2em; background: #64DDBB; color:#D33257; padding:5px; margin:5px; } </style> <body> <div id="x" class="konum">0</div> <div id="y" class="konum">0</div> </body> <script> //window (taraycı penceresi) üzerinde fare hareket ettirildikçe çalışacak kodlar window.onmousemove=function(olay) { //gerçekleşen olayla ilgili tüm bilgi olay değişkenine aktarılıyor. var xpos=document.getElementById('x'); var ypos=document.getElementById('y'); //clientX: farenin x eksenindeki konumu //clientY farenin y eksenindeki konumu } </script> </html> |
[divider]
Aşağıdaki örnekte tarayıcı ekranında fare hareket ettirildikçe ekrandaki div etiketinin genişliğini değiştiren örnek mecvuttur.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>YAZILIM BİLİŞİM</title> </head> <style> .konum{ width: 250px; height: 50px; line-height: 50px; font-size: 2em; background: #64DDBB; color:#D33257; padding:5px; margin:5px; } #kutu{ /* ÖNEMLİ NOT: HAREKET ETTİRİLECEK NESNENİN POZİSYON DEĞERİ ABSOLUTE OLMAK ZORUNDA!!!*/ position: absolute; width: 100px; height: 100px; background: #FF7416; } </style> <body> <div id="x" class="konum">X</div> <div id="y" class="konum">Y</div> <div id="kutu"></div> </body> <script> //window (taraycı penceresi) üzerinde fare hareket ettirildikçe çalışacak kodlar window.onmousemove=function(olay) { //gerçekleşen olayla ilgili tüm bilgi olay değişkenine aktarılıyor. var xpos=document.getElementById('x'); var ypos=document.getElementById('y'); var kutu=document.getElementById('kutu'); //clientX: farenin x eksenindeki konumu //clientY farenin y eksenindeki konumu xpos.innerHTML=olay.clientX; ypos.innerHTML=olay.clientY; //ÖNEMLİ NOT: HAREKET ETTİRİLECEK NESNENİN POZİSYON DEĞERİ ABSOLUTE OLMAK ZORUNDA!!! kutu.style.left=olay.clientX+"px"; kutu.style.top=olay.clientY+"px"; } </script> </html> |
Aşağıdaki örnekte tarayıcı ekranında fare hareket ettirildikçe ekrandaki div etiketini hareket ettiren örnek mecvuttur.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>YAZILIM BİLİŞİM</title> </head> <style> .konum{ width: 250px; height: 50px; line-height: 50px; font-size: 2em; background: #64DDBB; color:#D33257; padding:5px; margin:5px; } </style> <body> <div id="x" class="konum">X</div> <div id="y" class="konum">Y</div> </body> <script> //window (taraycı penceresi) üzerinde fare hareket ettirildikçe çalışacak kodlar window.onmousemove=function(olay) { //gerçekleşen olayla ilgili tüm bilgi olay değişkenine aktarılıyor. var xpos=document.getElementById('x'); var ypos=document.getElementById('y'); //clientX: farenin x eksenindeki konumu //clientY farenin y eksenindeki konumu xpos.style.width=olay.clientX +"px"; ypos.style.width=olay.clientY +"px"; } </script> </html> |
[…] Farenin Konumunu Öğrenme […]