Как вставить SWF поверх HTML-страницы? - PullRequest
Новая
       11

Как вставить SWF поверх HTML-страницы?

1 голос
/ 19 ноября 2008

Я хочу вставить SWF поверх HTML-страницы, как плавающая панель просмотра видео. У меня уже есть SWF-файл, который автоматически настраивает его размер в соответствии с размером браузера, а SWF-файл частично прозрачен. Я подумал, что могу просто добавить тег div, сделать абсолютную позицию и изменить z-index больше, но это не работает, потому что swf просто заменил все, что есть на странице.

Вот что я сделал 

<script>
      swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0");
</script>

<body bgcolor="#000000">
      <div id="header"></div>
      <div id="shell">
          things in my html
      </div>
</body>

#header {
    position:absolute;
    z-index:100;

}

Есть идеи? Спасибо.

Ответы [ 2 ]

5 голосов
/ 19 ноября 2008

После того, как вы правильно настроите размеры, вам нужно будет установить wmode на прозрачный , чтобы увидеть, что скрывается за вспышкой, если вы этого не сделаете, фон будет быть непрозрачным.

Это быстрая копия из swfobject docs , но она должна понять: 

<script type="text/javascript">

var flashvars = {};
var params = {wmode : "transparent"};
var attributes = {};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>
0 голосов
/ 19 ноября 2008

Я считаю, что проблема в том, что CSS не работает с тегами <object />. swfobject.embedSWF превращает <div id="header"></div> в тег <object /> с набором атрибутов, которые могут влиять на CSS. Если вы создаете оболочку DIV вокруг заголовка DIV и применяете CSS к оболочке DIV, все работает лучше. Вам также нужно добавить 100% ширины и высоты в CSS. Вот исправленный источник: 

<script>
    swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0");
</script>

<body bgcolor="#000000">
    <div id="wrapper">
        <div id="header"></div>
        </div>
    <div id="shell">
        things in my html
    </div>
</body>

#wrapper {
    position:absolute;
    z-index:100;
    width:100%;
    height:100%;
}
...