среда, 31 марта 2010 г.

Flash баннер поверх всех окон (popup) vs SWFObject

Пришлось на днях покапаться в html для реализации вывода флэш баннера в попап окне.
Для интеграции флэшки как обычно использовал опен сорс библиотеку SWFObject, попап реализовал на дивах (div), в хидерах линкуем либу и пишем скрипт отображения и скрытия нашего popup окна

<html><head>


<title>Popup Flash Banner Test</title>

<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
     <script src="js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">

function ShowPopUp(){

var popUpObj = document.getElementById('popUpLayer');
popUpObj.style.display="block";

var popUpObj = document.getElementById('popUpLayer');
 popUpObj.style.border = "1px solid #FFFFFF";
var flashvars = {       
       
        };
        var params = {
            menu: "false",
            scale: "noScale",
            allowFullscreen: "true",
            allowScriptAccess: "always",
            bgcolor: "#FFFFFF"
        };
        var attributes = {
            id:"tour"
        };
        swfobject.embedSWF("banner_link.swf", "altContent", "800", "450", "10.0.0", "expressInstall.swf", flashvars, params, attributes);
}
function ClosePopUp(){
var popUpObj = document.getElementById('popUpLayer');
popUpObj.style.display="none";

}

</script>
</head>
теперь в боди вставляем див с флэшкой и альтернативным контентом, div центруем по ширине страницы

<body>

<div id="popUpLayer" style="width:800px; height:462px;position:absolute; left:150px; top:60px; z-index:1000; display:none; background:#DDDDDD; " onMouseOver="this.style.border = '1px solid #707070';" onMouseOut="this.style.border = '1px solid #FFFFFF';">
<div style="text-align:right; "><b><a href="#" onClick="ClosePopUp();" style="font-family:verdana;font-size:10px;color:#000000; text-decoration:none;"> ЗАКРЫТЬ X </a></b>
</div>
<div id="altContent">
        <h1>Flash banner</h1>
        <p>Для просмотра содержимого страницы загрузите флэш плеер</p>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img
            src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
            alt="Get Adobe Flash player" /></a></p>
    </div>

</div>

 <script type="text/javascript">
 ShowPopUp();
 </script>
</body>
вот и вся петрушка.

1 комментарий:

  1. Здорово! А как сделать, чтобы это попап-окошко открывалось только после нажатия ссылки?

    ОтветитьУдалить