Размещение одного swf-файла над другим

Да, бывают такие случаи, когда один swf-файл надо разместить над другим. При этом нижний flash-ролик оказывается как-бы фоном для верхнего. Далее я расскажу об одном из способов реализации описанного ранее эффекта. Не буду утверждать, что способ универсальный и надёжный, но в тех браузерах, которые оказались у меня под рукой, всё работало просто замечательно.

Итак, приступим...

Первым делом, нам потребуется два flash-ролика, с которыми мы и будем работать.

Флеш-ролик № 1:

Флеш-ролик № 2:

Оба флеш-ролика имеют прозрачный фон (по крайней мере, прозрачный фон должен быть у того ролика, который будет лежать выше).

Теперь переходим к коду вставки flash-ролика в веб-страницу...

Код HTML:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Размещение одного swf-файла над другим</title> <link href="overlapping_swf.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> <div class="header">Размещение одного swf-файла над другим</div> <div class="content"> <div class="lower_swf"> <object type="application/x-shockwave-flash" data="overlapping_swf_1.swf" width="550" height="550"><param name="movie" value="overlapping_swf_1.swf"/><param name="wmode" value="transparent"/></object> </div> <div class="upper_swf"> <object type="application/x-shockwave-flash" data="overlapping_swf_2.swf" width="550" height="550"><param name="movie" value="overlapping_swf_2.swf"/><param name="wmode" value="transparent"/></object> </div> </div> <div class="futer">© edapskov</div> </div> </body> </html>

Код CSS (файл overlapping_swf.css):

* { margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; text-align:center; font-size:16px; color:#333333; } body { background-color:#ffffff; } .container { width:550px; margin:0 auto; margin-bottom:20px; margin-top:20px; } .header { padding:10px; font-size:24px; } .content { position:relative; } .lower_swf{ width:550px; margin:0 auto; } .upper_swf{ position:absolute; top:0px; left:0px; z-index:1; } .futer { padding:10px; font-size:12px; }

Из всего css-файла особое внимание следует обратить на следующий фрагмент...

Код CSS:

.content { position:relative; } .lower_swf{ width:550px; margin:0 auto; } .upper_swf{ position:absolute; top:0px; left:0px; z-index:1; }

Именно этот фрагмент кода CSS отвечает за реализацию интересующего нас эффекта.

А вот то, что у нас должно получиться - Пример.

Как видите, ничего особенно сложного тут нет.

Автор: admin

Дата добавления: 2013-01-31

Просмотров: 2934

Рейтинг поста: +7-

Правила перепечатки

Социальные закладки:
Комментарии:
К данной заметке комментариев пока нет. Ваш комментарий может стать первым.
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика