Merhaba, bu çalışmada sizlerle birlikle < div > etiketini kullanarak bir resmi masekleyecceğiz ve sonrasında bu nesne üzerinde farenin hareketlerini izleyerek farenin hareket yönünün tersinde maskelenmiş resmi konumlandırarak kullanıcının resmin istediği bölgesini rahatça görüntülemesini sağlayacağız. Ayrıca çalışamamızda önceki ve sonraki butonları/düğmeleri olacak ve bunları kullanarak kullanıcı diğer resimleri de aynı şekilde bakabilecek. Oldukça basit ve farenin konumunu kontrol etmeyi öğretici bir uygulama olacağını söyleyebilirim. Uygulama tamamlandığında aşağıdaki gibi bir ekran görüntüsüne sahip olacaksınız.
Fare yukarıdaki resimde hangi yönde hareket ettirilirse görüntülenmekte olsan resim de hareket yönünün tam ters yönünde hareket ettirilmektedir. Böyle resim fare işaretçisinin altında kayıyormuş gibi bir etki oluşmaktadır. Bunu gerçekleştirebilmek için yeni bir web sayfası oluşturarak yukarıdaki ekran görüntüsünü elde edecek biçimde bir tasarım yapıyoruz. Burada dikkat edilecek en önemli husus resmin kendisine göre çok daha küçük boyutlara sahip < div > nesnesi içerisine yerleştirilmiş olması ve bu < div > nesnesinin ise overflow özelliğinin hidden olarak ayarlamış olmasıdır. Böylece nesnemizden daha büyük olan resmimiz < div > nesnesi ile makselenmiş olmaktadır. Web sayfamızın HTML kodları aşağıdaki gibidir. Fare sayfamız hareket ettiğinde fareNerede(); olayını tetiklemektedir. tuval ise maskele div nesnesidir.
< body onmousemove="fareNerede()" onload="etiketle()" >
< table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" >
< tr >
< td height="5%" id="baslikTD" colspan="3" >Fare duyarlı resim< / td >
< / tr >
< tr >
< td colspan="3" height="90%" align="center" valign="middle" >
< div id="tuval" onmouseover="hangiNesne(1)" onmouseout="hangiNesne(0)" >
< img style="position:relative" id="panda" src="resimler/ resim1.jpg" / >
< / div >
< / td >
< / tr >
< tr >
< td height="5%" width="10%" id="konumTD" >< / td >
< td height="5%" width="80%" align="center" >
< input id="btnSonraki" type="button" value="Sonraki" onclick="resimYukle(true)"/ >
< input id="btnOnceki" type="button" value="Önceki" onclick="resimYukle(false)"/ >
< / td >
< td height="5%" width="10%" id="tasarimciTD" >www.bilalsert.com.tr< / td >
< / tr >
< / table >
< / body >
Burada bulunan HTML nesnelerini biçimlendirirken yazdığım CSS kodları ise aşağıda verdiğim gibidir. Görüleceği üzere fazla bir biçimlendirme olayı yoktur temel olarak zemin ve metin rengi, genişlik ,yükseklik, metin boyutu vb. yıl içerisinde sürekli kullandığımız css özellikleri burada da kullanılmıştır. Anlaşılmayacak bir husus olmadığı kanaatindeyim bu nedenle fazladan bir açıklama yazma ihtiyacı duymuyorum.
<style type="text/css">
#baslikTD{
background-color:#eee;
color:gray;
text-align:center;
font-size:24px;
border:1px solid gray;
}
#tasarimciTD{
background-color:#ddd;
color:crimson;
text-align:right;
padding-right: 10px;
font-size:14px;
font-weight: bold;
border:1px solid gray;
}
#konumTD{
color:black;
background-color:#ddd;
text-align:left;
font-size:12px;
border:1px solid gray;
}
#tuval{
background-color:#eee;
width: 700px;
height: 400px;
border:1px solid gray;
overflow: hidden;
}
body{
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
}
style>
Son olarak gelelim bu sayfanın işlevsellik kazanması için yazdığımız JavaScript kodlara. Bu kodlar da aşağıda verdiğim üzeredir, kod satırlarında önce o kodu neden yazdığımı açıklayan bir/çok açıklama satırı bulunduğu için burada fazladan nefes tüketmek yersiz olacaktır. Aslında bu işlemi çok ama çok daha kısa bir biçimde yapabilirsiniz lakin bu durumda kodların okunurluğu bir o kadar azalmış oluyor bu nedenle böyle bir yöntem izledim. Unutmayın derslerde de ömrünüzün büyük bir bölümü yazarak gerçiyordu "Hocam yeşil bölümleri yamasak olur mu?" sorusunu her defasında usanmadan sormaya devam ediyordunuz. "Hayır olmaz. Herşeyi yazacaksınız :)" Eğer işler yolunda gitmişse elinizde buna benzer bir web sayfası olacaktır.
<script type="text/javascript" language="javascript">
var nesneID=0;
var eskiX=0,yeniX=0;
var eskiY=0, yeniY=0;
var posX=0,posY=0,resIndeks=1;
function fareNerede(){
/////////////////////////////////////////////////////////////////
// Tasarim ve kodlama : Bilal SERT
// Tarih-Saat : 00.00.2019 | 14:35
// Amaç : Div nesnesi içerisindeki bir resmi
// farenin hareket yönüne ters yönde ve farenin hareket
// konum değişiklikleri ile orantılı olarak hareket ettirmek
// Giriş/Çıkış : Yok
// Çağrıldığı yer: body.onMouseMove()
/////////////////////////////////////////////////////////////////
yeniX=parseInt(window.event.x);
yeniY=parseInt(window.event.y);
if(nesneID==1){
if(yeniX>eskiX){
if(posX>-660)posX-=Math.abs(yeniX-eskiX);
}else{
if(posX<0)posX+=Math.abs(yeniX-eskiX);
}
if(yeniY>eskiY){
if(posY>-350)posY-=Math.abs(yeniY-eskiY);
}else{
if(posY<0)posY+=Math.abs(yeniY-eskiY);
}
konumTD.innerHTML="x:" + posX + " y:" + posY;
panda.style.left=posX + "px";
panda.style.top=posY +"px";
}
eskiX=yeniX;
eskiY=yeniY;
}//fareNerede
function hangiNesne(oid){
/////////////////////////////////////////////////////////////////
// Tasarim ve kodlama : Bilal SERT
// Tarih-Saat : 00.00.2019 | 14:30
// Amaç : Şeyet birden fazla hedef nesne olursa
// farenin hangi nesne üzerinde olduğunu anlamak
// Giriş/Çıkış : oid (nesnenin numarasi) / yok
// Çağrıldığı yer: tuval.onmouseover(1) | tuval.mouseout(0)
/////////////////////////////////////////////////////////////////
nesneID=oid;
}//hangiNesne
function etiketle(){
/////////////////////////////////////////////////////////////////
// Tasarim ve kodlama : Bilal SERT
// Tarih-Saat : 00.00.2019 | 14:20
// Amaç : Sayfa yüklenirken maskelenecek resmin
// en boy degerlerini almak
// Giriş/Çıkış : Yok
// Çağrıldığı yer : body.onLoad()
/////////////////////////////////////////////////////////////////
//konumTD.innerHTML=nesneID;
posX=parseInt(tuval.panda.style.left);
posY=parseInt(tuval.panda.style.top);
}
function resimYukle(durum){
/////////////////////////////////////////////////////////////////
// Tasarim ve kodlama : Bilal SERT
// Tarih-Saat : 00.00.2019 | 14:45
// Amaç : Maskelenecek resimleri yüklemek
// Giriş/Çıkış : durum==true(sonraki resim)
// durum==false(önceki resim)
// Çağrıldığı yer: btnSonraki.click()| btnOnceki.click()
/////////////////////////////////////////////////////////////////
if(durum==true){
if(resIndeks<5)resIndeks++;
}else{
if(resIndeks>1)resIndeks--;
}//if
panda.src="resimler/resim" + resIndeks + ".jpg";
}//resimYukle
</script>