Statyczna, czasowa reklama

[shycat]

Witam, potrzebuje skryptu JS, ktory na srodku ekranu wyswieli reklame, ale nie chodzi o to, ze gdy user przesunie pasek w dol to ona dalej bedzie na srodku, ma sie tez przesuwac, no i zeby taka reklama byla pokazywana przez np 5 sekund, a potem znikala, szukalam takiego skryptu juz na googlach i nie mogam znalezc, na stronie gry.pl jest taka reklama kiedy sie w gre gra, ale nie potrafilam jej przerobic... pozdrawiam

[gorylek]

Witaj,
ogólnie nie jest to trudne do zrobienia. Jeżeli chcesz by element był na środku okna przeglądarki niezależnie od wielkości okna czy rozdzielczości należy użyć takiego kodu. Zakładamy że kod reklamy będzie w DIV o wysokości 100 i szerokości 200 pixeli.

Kod: Zaznacz cały

#reklama
{
width: 200px;
height: 100px;
position: fixed;
top: 50%;
left: 50%;
margin: -50px -100px;
}

I sprawa załatwiona. Teraz wystarczy Ci funkcja JS która usunie element po 5 sekundach. Można go wywalić z drzewka DOM lub zwyczajnie ukryć za pośrednictwem display: none; Potrzeba nam jeszcze opóźnienie na 5 sekund. Całość wyglądać będzie tak:

Kod: Zaznacz cały

function ukryj()
{
setTimeout("document.getElementById('reklama').style.display = 'none'",5000);
}

Funkcje należy odpalić za pośrednictwem zdarzenia onLoad. W sumie jest to tylko teoria bo w praktyce tego nie testowałem no i pisałem z palca więc nie gwarantuje poprawnego działania ale masz punkt zaczepienia. Jednak jeżeli nic nie pokićkałem to powinno być ok.

Wady tego skryptu ? Netscape Navigator w starszych wersjach używał display: hide/visible czy coś koło tego. Nie wiem jak aktualna wersja. Jednak % ludzi używających tej przeglądarki jest znikomy. Ewentualnie możesz wykryć przeglądarkę użytkownika i zastosować dla niej odmienny kod.
Druga wada to IE 6. Błogosławieni niech będzie twórcy tej przeglądarki i wszystkie jego dzieci. Niech się smażą w piekle. Przeglądarka ta nie obsługuje position:fixed; a że % ludzi którzy używają tego badziewia i żyją w błogiej nieświadomości swojego błędu jest dość spory, nie możemy tego zignorować.

Jednak nie wszystko stracone, da się wymusić na IE 6 position: fixed; Pierwszym z warunków jest to by dokument HTML miał poprawny DOCTYPE a zakładam że szanujesz standardy więc idziemy dalej.
Musisz użyć osobnego kodu dla IE 6. Polecam wsadzenie go w osobny plik CSS pod linkiem do głównego pliku CSS w warunek IF IE6.
Kod dla tego badziewia będzie wyglądał tak:

Kod: Zaznacz cały

 html, body  {
height: 100%;	overflow: auto; 
}

#reklama
{
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px -100px;
}

I po kłopocie.
Pozdrawiam
Gorylek

PS: Nie muszę chyba dodawać że blok z reklamą to <div id="reklama"> Kod reklamy </div>