HTML Cambazlıkları
GeoCities’in Yüzen Grafiğini Kıskanıyor Musunuz?
İçindekiler
GeoCities’in Yüzen Grafiğini Kıskanıyor Musunuz?
GeoCities bütün sayfalarında yarı-saydam bir loga grafiği, sayfası yukarı da indirseniz, aşağı da indirseniz, sağ alt köşede kıpırdamadan durur. Bu etkiyi elde etmek isterseniz, sadece IE 4 ve sonrasında işlemek üzere, işte kodu:
<body style=”background-image: url(‘resim.gif’); background-attachment: fixed; background-repeat: no-repeat; background-position: right bottom”>
Fakat aynı etkiyi Netscape de de elde etmek için, bir Javascript’e ihtiyaç var. Önce, DIV ile bir katman oluşturalım:
<DIV id=”waterMark” style=”position:absolute”><A href=”/index.html”><IMG src=”watermark.gif” width=90 height=90 border=0></A></DIV>
Kullanacağınız grafiğin dosya adı ne ise, burada grafik kaynak (scr=) yerinde bu ismi kullanacaksınız. Bunu hallettikten sonra, DIV bölümünden sonra ve tercihan BODY etiketinin kapanmasından önce, şu kodu yazın. (Bu Script’i , telif hakkı satırını atmamak şartıyla istediğiniz gibi değiştirerek, kullanabilirsiniz.)
<script language=”JavaScript1.2″>
<!–
// Watermark script by Paul Anderson, CNET Builder.com. All rights reserved.
markW = 90; //resmin genişliği
markH = 90; //resmin yüksekliği
markX = 100; //sol kenardan uzaklık
markY = 100; //üst kenardan uzaklık
markRefresh = 20; //yenilenme süresi milisaniye olarak
if (!document.all) document.all = document;
if (!document.all.waterMark.style) document.all.waterMark.style = document.all.waterMark;
wMark = document.all.waterMark.style;
wMark.width = markW;
wMark.height = markH;
navDOM = window.innerHeight; // Nav DOM flag
function setVals() {
barW = 0; // scrollbar compensation for PC Nav
barH = 0;
if (navDOM) {
if (document.height > innerHeight) barW = 20;
if (document.width > innerWidth) barH = 20;
} else {
innerWidth = document.body.clientWidth;
innerHeight = document.body.clientHeight;
}
posX = ((innerWidth – markW)-barW) * (markX/100);
posY = ((innerHeight – markH)-barH) * (markY/100);
}
function wRefresh() {
wMark.left = posX + (navDOM?pageXOffset:document.body.scrollLeft);
wMark.top = posY + (navDOM?pageYOffset:document.body.scrollTop);
}
function markMe() {
setVals();
window.onresize=setVals;
markID = setInterval (“wRefresh()”,markRefresh);
}
window.onload=markMe;
//–>
</script>
Yüzen logo olarak kullanacağınız resmin eni-boyu kaç piksel ise, markW ve markX değişkenlerinin karşısına bu değerleri yazmalısınız. Ayrıca logonuzun ekranın neresinde sabit durmasını istiyorsanız, o noktanın koordinatlarını (yüzde olarak) markX ve markY değişkenlerinin karşısına yazablirsiniz. Bu örnekte logo, erkanın sağ alt köşesinde duracak şekilde ayarlanmış bulunuyor. Bu değerler 0,0 olursa, logo ekranın sol üst köşesinde 50,50 olursa ortasında, 100,0 olursa sağ üst köşesinde, 0,100 olursa sol alt köşesinde durur. Yenilenme oranı olan milisaniye ise, Browser’ın logonun yerini kaç saniyede bir güncelleştirmesini istediğinizi gösterir. Bu süre ne kadar düşük olursa, logo o kadar yerinde sabit kalır.
