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

Я хочу встроить 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;

}

Любая идея? Спасибо.

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
6 078
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я считаю, что проблема в том, что 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%;
}

он все еще не работает правильно, после того, как я добавлю оболочку, он сократит страницу наполовину, половина - это swf, а половина - это html. также, если я добавлю ширину: 100% и высоту: 100%, все мои кнопки будут отключены ...

shibbydoo 19.11.2008 01:20
Ответ принят как подходящий

Как только вы добьетесь правильной настройки размеров, вам нужно будет установить 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>

Другие вопросы по теме