JavaScript ile bir resmi dikey ve yatay olarak nasıl ortalarsınız?

İnternette bir resmi ortalamak için birçok kod bulunuyor, maalesef kimi çalışıyor, kimi istenildiği gibi çalışmıyor. Aşağıdaki kodlar önceki yazılarımda olduğu gibi denenmiş ve %100 çalışan kodlardır. Bu arad, kodları hemen kopyalayıp yapıştırmak yerine önce mantığını anlamaya çalışın, böylece kendinizi daha iyi geliştirebilirsiniz.  

Bu yazımızda JavaScript betik dili kullanarak bir resmi pencere boyutları değişse dahi hem yatayda hem de dikeyde ortalıyoruz.

JavaScript'de aşağıdaki fonksiyon ile tarayıcının pencere boyutlarını pencereBoyutunuAl() fonksiyonu ile alıyoruz. Bu fonksiyon geriye yükseklik ve genişlik olarak iki değer döndürüyor. 

function pencereBoyutunuAl(){
 var d= document, root= d.documentElement, body= d.body;
 var gen= window.innerWidth || root.clientWidth || body.clientWidth, 
 yuk= window.innerHeight || root.clientHeight || body.clientHeight ;
 return [gen,yuk]
}
 
 
Resmimizi ekranda ortalamak için ortala() isimli bir fonksiyon yazdık. ortala() fonksiyonu içerisinde yukarıdaki pencereBoyutunuAl() fonksiyonunu çağırarak mevcut ekranın genişlik ve yüksekliğini buluyoruz. Ayrıca resmimizin de genişlik ve yükseklik değerini alıyoruz. Sonra resmimizi dikey olarak ekranda ortalamak için (EkranYükseklik-ResimYukseklik)/2 formülünü kullanıyoruz. Ayrıca resmimizin  yatay olarak ortalamak için  (EkranGenişlik-ResimGenislik)/2 formülünü kullanıyoruz.

CSS'te left özelliği soldan piksel olarak mesafeyi, top özelliği ise üst kısımdan piksel olarak mesafeyi atamak için kullandığımız değişkenlerdir.

Aşağıdaki alert satırları çalışmıyor, bu satırlarda ekrana mesaj şeklinde bilgileri yazdırarak, kodların doğru çalışıp çalışmadığını kontrol ettim. 

function ortala(){
var boyut = new Array();
boyut= pencereBoyutunuAl();
ekranGenislik = boyut[0];
ekranYukseklik= boyut[1];
 
//alert(ekranGenislik+" "+ekranYukseklik);
 
var benimlogo = document.getElementById('cologo');
var genislik = benimlogo.width;
var yukseklik = benimlogo.height;
//alert(genislik+" "+yukseklik);
 
sol = (ekranGenislik-genislik)/2;
ust =( ekranYukseklik/2-yukseklik/2)/2;
//alert(sol+" "+ust);
 
benimlogo.style.position="absolute";
benimlogo.style.left=sol+"px";
benimlogo.style.top=ust+"px";
 
}

window.onload fonksiyonu sayfa yüklenirken çalışıyor, bu fonksiyonun içine hangi komutları yazarsak sayfa yüklenirken o komutları işletir. Bu durumda ortala() fonksiyonumuzu çağırıyoruz.
 
window.onload = function() {
 ortala();
};

windows.onresize ise kullanıcı tarayıcı penceresinin boyutlarını değiştirdiğinde yani küçültüp büyüttüğünde çalışır. Bu durumda yine ortala() fonksiyonumuzu çağırıyoruz.
 
window.onresize = function(event) {
 ortala();
};


 
Kodların tamamı aşağıdaki gibidir, Notepad++ veya Dreamviewer gibi bir editöre kopyalayıp yapıştırarak deneyebilirsiniz. logo.jpg isimli bir resmi de klasörde aynı yere atarsanız resmin nasıl ortalandığını görebilirsiniz. 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="tr-TR" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<img id="cologo" src="logo.jpg"  width="400" height="210">
</body>
</html>
<script>
 
function pencereBoyutunuAl(){
 var d= document, root= d.documentElement, body= d.body;
 var gen= window.innerWidth || root.clientWidth || body.clientWidth, 
 yuk= window.innerHeight || root.clientHeight || body.clientHeight ;
 return [gen,yuk]
}
 
function ortala(){
var boyut = new Array();
boyut= pencereBoyutunuAl();
ekranGenislik = boyut[0];
ekranYukseklik= boyut[1];
 
//alert(ekranGenislik+" "+ekranYukseklik);
 
var benimlogo = document.getElementById('cologo');
var genislik = benimlogo.width;
var yukseklik = benimlogo.height;
//alert(genislik+" "+yukseklik);
 
sol = (ekranGenislik-genislik)/2;
ust =( ekranYukseklik/2-yukseklik/2)/2;
//alert(sol+" "+ust);
 
benimlogo.style.position="absolute";
benimlogo.style.left=sol+"px";
benimlogo.style.top=ust+"px";
//ekranYukseklik = window.screen.availHeight;
//ekranGenislik = window.screen.availWidth;
}
window.onload = function() {
 ortala();
};
 
window.onresize = function(event) {
 ortala();
};
 
Mutlu Kodlamalar,
Oğuzhan TAŞ
Ocak, 2015

Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale