Porady
"Przezroczysty" POPUP"

Ponieważ od pojawienia się na naszej stronie głównej popupu, w którym można stworzyć efekt przezroczystości dostałem od Was sporo maili z pytaniem jak go stworzyć postanowiłem - zamiast odpisywać na każdy taki mail osobno - umieścić w serwisie opis tego skryptu. Efekt jest o tyle ciekawy, że jego konstrukcja pozwala nam pokazać w formie popupu w zasadzie dowolną (wyglądem) reklamę, o dowolnym - czytanym oczywiście przez przeglądarkę - formacie.
Do umieszczenia takiej reklamy potrzebny nam jest plik baner.js w którym umieścimy cały kod naszej reklamy. Zawartość tego pliku może wyglądać np. tak (pod nim opiszę co należy zmienić, przerobić):
<!-- var imgwidth=6; var imgheight=6; var posnamx=['west','centre','east','*']; var posnamy=['sky','horizon','floor','*']; var px=0; var py=0; var IEjustierenW=0; var IEjustierenH=0; browser_version= parseInt(navigator.appVersion); browser_type = navigator.appName; if (browser_type == "Microsoft Internet Explorer" && (browser_version >= 4)) { document.writeln('<div id="branding" style="position:absolute; visibility:show; left:235px; top:-5px; z-index:2">'); document.writeln('<table width=10><tr valign=top><td>'); document.writeln('<A HREF="http://www.reklamowana_strona.pl" TARGET="_blank">'); document.writeln('<IMG SRC="http://www.reklamowana_strona/banner.gif" border=0 WIDTH=199 HEIGHT=136 ALT="napis po najechaniu na grafikę"></A>'); document.writeln('</td>'); document.writeln('<td><input type=button onClick="pos(3,3)" value="x"></td></tr></table></div>'); IEjustierenW=3; IEjustierenH=3; } else if (browser_type == "Netscape" && (browser_version >= 4)) { document.writeln('<layer name="branding" top=' + imgheight + ' left=' + imgwidth + ' height=200>'); document.writeln('<table cellpaddin=2 cellspacing=0><tr valign=top><td valign=top>'); document.writeln('<A HREF="http://www.reklamowana_strona.pl" TARGET="_blank">'); document.writeln('<IMG SRC="http://www.reklamowana_strona/banner.gif" border=0 WIDTH=199 HEIGHT=136 ALT="napis po najechaniu na grafikę"></A>'); document.writeln('</td>'); document.writeln('<td><form><input type=button onClick="pos(3,3)" value=" X "></form></td></tr></table></layer>'); } function schowaj() { document.all["branding"].style.visibility="hidden"; }; function pos(x,y) { if (x==3) x=(px+1)%3; if (y==3) y=(py+1)%2; if (x==0) {imgwidth='6'} else if (x==1) {imgwidth='Math.round((eval(innerW)-374)/2)'} else {imgwidth='(eval(innerW)-407)+3*IEjustierenW'} if (y==0) {imgheight='6'} else if (y==1) {imgheight='(eval(innerH)-278)+3*IEjustierenH'} else {imgheight='Math.round((eval(innerH)-266)/2)'}; px=x; py=y; } document.write ('<IMG SRC="" BORDER=0 WIDTH=1 HEIGHT=1 onload="setVariables(); checkLocation();">'); setTimeout ("schowaj()", 19000); var i=0; var radius=0; function setVariables() { if (navigator.appName == "Netscape") { horz=".left"; vert=".top"; docStyle="document."; styleDoc=""; innerW="window.innerWidth"; innerH="window.innerHeight"; offsetX="window.pageXOffset"; offsetY="window.pageYOffset"; } else { horz=".pixelLeft"; vert=".pixelTop"; docStyle=""; styleDoc=".style"; innerW="document.body.clientWidth"; innerH="document.body.clientHeight"; offsetX="document.body.scrollLeft"; offsetY="document.body.scrollTop"; } } function checkLocation() { objectXY="branding"; var availableX=eval(innerW); var availableY=eval(innerH); var currentX=eval(offsetX); var currentY=eval(offsetY); y=(eval(imgheight)-IEjustierenH)+currentY-eval(docStyle + objectXY + styleDoc + vert); x=(eval(imgwidth)-IEjustierenW)+currentX-eval(docStyle + objectXY + styleDoc + horz); if (y>1) y=(y+9)/10; if (y<-1) y=(y-9)/10; if (x>1) x=(x+9)/10; if (x<-1) x=(x-9)/10; //document.1.1.value=window.x; x=x+(radius*Math.sin(i/30)); y=y+(radius*Math.cos(i++/30)); evalMove(); setTimeout("checkLocation()",1); } function evalMove() { eval(docStyle + objectXY + styleDoc + horz + "+=" + x); eval(docStyle + objectXY + styleDoc + vert + "+=" + y); } setVariables(); checkLocation(); pos(2,3); //-->
Plik możemy stworzyć np. za pomocą notatnika - czy innego dowolnego edytora - i po wstawieniu kodu zapisać go z rozszerzeniem *.js.
Pierwsze co będzie nas interesowało w pliku to dwie definicje wyglądu - dla IE i Netscape'a - pierwsza definicja zaczyna się od zadeklarowania wyglądu dla Internet Explorer - if (browser_type == "Microsoft Internet Explorer" && (browser_version >= 4)) { to co pojawia się dalej to wygląd naszej reklamy.
Jak zapewne już zauważyłeś cała reklama sprowadza się do tabeli, w której umieszczony został gif - http://www.reklamowana_strona/banner.gif - (jeśli zawiera on przezroczyste elementy będzie to zauważalne na stronie - w tych miejscach przebijać będzie nasza strona główna) i odwołanie do reklamowanej strony (<A HREF="http://www.reklamowana_strona.pl" TARGET="_blank">)
Całość nie jest w zasadzie niczym innym jak po prostu kodem HTML - różnica polega jedynie na tym, że ponieważ używamy Java Scriptu, każdą linię kodu zapisujemy w następujący sposób: document.writeln('..... tutaj kod HTML ......');
Możemy więc dowolnie modyfikować wygląd naszego popupu zmieniając odpowiednio kod - możemy zmienić wygląd tabeli, umieścić kilka obrazków czy np. wstawić animację Flash!!
Pamiętać należy, aby wszystkie dokonane zmiany znalazły się również w drugiej części - musimy powtórzyć całą definicję jeszcze raz, tym razem dla Netscape'a. Definicja wyglądu dla tej przeglądarki rozpoczyna się od:
else if (browser_type == "Netscape" && (browser_version >= 4)) {
Po zdefiniowaniu wyglądu bannera interesować nas będą jeszcze dwie rzeczy:
- ustawienie czasu wyświetlania: definiujemy to w linii setTimeout ("schowaj()", 19000); - zmieniając odpowiednio 19000 na czas, przez który chcemy aby banner był widoczny
- oraz samo zdefiniowanie pokazania się bannera na stronie. W tym celu (po zapisaniu pliku i umieszczeniu go na serwerze) dodajemy do strony - na której ma być widoczna reklama - wywołanie skryptu. Będziesz tu musiał oczywiści zmienić ścieżkę do pliku baner.js:
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" SRC="http://www.adres_pliku_ze_skryptem/baner.js"></SCRIPT>
Dobrą metodą jest umieszczenie wywołania reklamy na samym końcu strony - wówczas banner pojawi się dopiero po wczytaniu całego kodu. W przeciwnym wypadku - zwłaszcza jeśli zdefiniujesz zbyt krótki czas pojawiania się popupu - możesz nie zauważyć nawet pojawienia się reklamy.

Autor:Web Pomocnik


drukuj