Özellikle arkadaşlık sitelerinde sıkça kullanılan msn popup penceresinden çoğumuz haberdardır.Genelde üye kayıt sayısını arttırmak amaçlı ya da reklam amaçlı dikkat çekici bir uygulama olarak karşılaşır olduk.Az sonra vereceğim javascript dosyasıyla artık bu tarz uygulamaları kendi web sitelerinizde kullanabilir hâle geleceksiniz.

Öncelikle aşağıdaki javascript dosyasını kendinize göre düzenlemeniz gerekiyor.JS dosyasında yer alan ilk iki satırda gördüğünüz "resim" adındaki dosya açılacak olan msn popup penceresi olmalıdır.Uzantısını da jpg,gif vs. resim uzantılarından biriyle belirleyebilirsiniz.

var picLink = 'http://www.site_adresi.com/resim' + '.jpg';
document.getElementById('resim').src = picLink;

//<![CDATA[

var popupWinoldonloadHndlr=window.onload, popupWinpopupHgt, popupWinactualHgt, popupWintmrId=-1, popupWinresetTimer;
var popupWincntDelta;
window.onload=popupWinespopup_winLoad;
       
function popupWinespopup_ShowPopup(show)
{
    if (popupWintmrId!=-1) return;

    el=document.getElementById('popupWin');
    el.style.right='208px';
    el.style.top='';
    el.style.filter='';

    if (navigator.userAgent.indexOf('Opera')!=-1)
        el.style.bottom=(document.body.scrollHeight*1-document.body.scrollTop*1
        -document.body.offsetHeight*1+1*popupWinpopupBottom)+'px';

    popupWinactualHgt=0; el.style.height=popupWinactualHgt+'px';
    el.style.visibility='';
    if (!popupWinresetTimer) el.style.display='';
    popupWintmrId=setInterval(popupWinespopup_tmrTimer,(popupWinresetTimer?1000:20));
}

function popupWinespopup_winLoad ()
{
    if (popupWinoldonloadHndlr!=null) popupWinoldonloadHndlr();

    elCnt=document.getElementById('popupWin_content')
    el=document.getElementById('popupWin');
    popupWinpopupBottom=el.style.bottom.substr(0,el.style.bottom.length-2);

    popupWinpopupHgt=el.style.height;
    popupWinpopupHgt=popupWinpopupHgt.substr(0,popupWinpopupHgt.length-2); popupWinactualHgt=0;
    popupWincntDelta=popupWinpopupHgt-(elCnt.style.height.substr(0,elCnt.style.height.length-2));

    popupWinresetTimer=true;
    popupWinespopup_ShowPopup(null);

}


function popupWinespopup_tmrTimer()
{
  el=document.getElementById('popupWin');
  if (popupWinresetTimer)
  {
    el.style.display='';
    clearInterval(popupWintmrId); popupWinresetTimer=false;
    popupWintmrId=setInterval(popupWinespopup_tmrTimer,20);
  }
  popupWinactualHgt+=5;
  if (popupWinactualHgt>=popupWinpopupHgt)
  {
    popupWinactualHgt=popupWinpopupHgt; clearInterval(popupWintmrId); popupWintmrId=-1;
    document.getElementById('popupWin_content').style.display='';
  }

  if ((popupWinactualHgt-popupWincntDelta)>0)
  {
    elCnt=document.getElementById('popupWin_content')
    elCnt.style.display='';
    elCnt.style.height=(popupWinactualHgt-popupWincntDelta)+'px';
  }
  el.style.height=popupWinactualHgt+'px';
}

//]]>

Sayfanıza yerleştireceğiniz kodlar aşağıdaki gibidir.HTML,ASP.NET,PHP vs. sayfalarınıza kolaylıkla ekleyebilirsiniz.Kodlarda adı geçen msn.js dosyası yukarıda belirttiğim javascript kodlarının dosya halidir.

<div id="popupWin" style="right: 0px; bottom: 0px; display: none; z-index: 9999; position: absolute; height: 123px"><div id="popupWin_content" style="padding:2px; display: none; overflow: hidden; width: 201px; height: 116px; position: absolute;">
<a href="http://www.google.com" target="_blank"><img id="resim" src="resim.jpg" width="201" height="116" border="0" alt="" /></a></div></div>
<script src="msn.js" language="JavaScript"></script>

Tüm işlemler bu kadar umarım abartıp ziyaretçileri rahatsız edecek boyutlarda kullanmazsınız .

Demo uygulamaya göz atmak için tıklayın