WYSKAKUJĄCE OKIENKO

Dzisiaj przedstawię rozwiązanie do wykorzystania na naszej stronie internetowej dla osób, które już troszke bawią się tworzeniem stron.

Często dobrym rozwiązaniem dla przekazania odwiedzającym naszą stronę ważnej informacji lub poprostu reklamy jest tzw. wyskakujące okienko.

Ponieważ tradycyjne wyskakujące okienka są blokowane przez większość przeglądarek internetowych, nasze wyskakuące okienko musi być integralną częścią wyświetlanej strony. Najprościej efekt ten uzyskać tworząc warstwę <div> znajdującą się na wierzchu, nad pozostałą zawartością.

 

Przykładem kodu do wklejenia na stronę może być:

 

<div id=”mojareklama” style=”position:absolute; z-index:100; height:400px; width:550px; left:50%; margin-left:-275px; top: 100px;”>

<OBJECT CLASSID=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″
CODEBASE=

http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0
WIDTH=”550″ HEIGHT=”400″ >
<PARAM NAME=”MOVIE” VALUE=”test1.swf”>
<PARAM NAME=”PLAY” VALUE=”true”>
<PARAM NAME=”LOOP” VALUE=”true”>
<PARAM NAME=”QUALITY” VALUE=”high”>
<EMBED SRC=”test1.swf” WIDTH=”550″ HEIGHT=”400″ PLAY=”true” LOOP=”true” WMODE=”opaque” QUALITY=”high”
TYPE=”application/x-shockwave-flash”
PLUGINSPAGE=”http://www.macromedia.com/go/getflashplayer„>
</EMBED>
</OBJECT>
<script language=javascript type=’text/javascript’>
function hideDiv(elementID)
{
if (document.getElementById)
{ // DOM3 = IE5, NS6
document.getElementById(elementID).style.visibility = 'hidden’;
}
}
</script>

</div>

 

 

Powyższy kod określa położenie wyskakującego okienka i jego rozmiar w sekcji div style=. Żeby okienko było wyświetlane na środu strony, niezależnie od rozdzielczości monitora, najlepiej jest określić położenie od lewej krawędzi na 50%, a następnie cofnąć margines o połowę szerokości okienka.

Następną częścią kodu jest skrypt umożliwaijący wyświetlanie plików swf (flash )na stronie www. Tutaj jest pełna dowolność jaki skrypt się wykorzysta, chodzi tylko o to żeby plik flash był wyświetlany.

Ostatnią częścią kodu jest skrypt, którego wywołanie zamyka stworzonego wcześciej „div-a”. Skrypt ten powinien być wywołany kliknięciem w przycisk na animacji flash. Actionscript umieszczony w animacji flash zależy od wersji programu adobeflash. Generalnie jednaj jest on analogoczny ze skryptem przekierowującym na inną stronę www z tą różnicą, że zamiast adresu URL wprowadza się nazwę javascript.

Przykładowo dla adobe flash CS5 actionscript wygląda tak:

button_1.addEventListener(MouseEvent.CLICK, fl_ClickToGoToWebPage);

function fl_ClickToGoToWebPage(event:MouseEvent):void
{
stop();
navigateToURL(new URLRequest(„javascript:hideDiv(’mojareklama’); „), „_self”);

Mag – www.pioart.pl