КАТЕГОРИИ


You need to upgrade your Flash Player


Создание сайтов - блок поверх флеша

Неоднократно встречал в нете вопрос о размещении чего-либо поверх флеша, особенно эта проблема волнует тех, кто пытается на сайте совместить флеш и лайтбокс (lightbox). Сам в свое время столкнулся с подобной проблемой, пытаясь решить ее посредством наслоения с помощью z-index, но все оказалось не так просто и стандартные средства CSS не помогли... поэтому данная статья посвящается именно вопросу размещения блока поверх флеша.

Первое, что нам необходимо - это сам флеш. Здесь мы немного отойдем от темы и коснемся способов публикации флеша, хотя, если Вам это не нужно, то Вы можете смело пропустить данный абзац. Способов публикации флеша несколько, но лично я использую SWFObject - это способ публикации на JavaScript. По сравнению с классическим HTML (способ, который, на мой взгляд, уже морально устарел) предложенный способ имеет существенные преимущества - вот некоторые из них:

Итак, для публикации флеша данным способом необходимо скачать скрипт SWFObject (подробнее о нем можно прочитать на сайте разработчиков), включить скрипт в заголовке страницы и прописать код флеш-ролика:

<head>
<script type="text/javascript" src="swfobject.js"></script>
</head>

<body>
<!--Вставляем флеш-ролик-->

<div id="myclip">Здесь предупреждение, которое отобразится в случае, если у юзера не установлен флеш-плеер</div>

<script type="text/javascript">

var so = new SWFObject("Ваш флеш.swf", "mymovie", "Ширина флеша", "Высота флеша", "7", "#ffffff");

so.write("myclip");

</script>
</body>

Итак, 5 строк кода и 1 подключаеый скрипт - все, что необходимо для кроссбраузерной работы флеша на Вашем сайте. Для того, чтобы разместить что-то поверх данного флеша нам надо просто дописать в блоке подключения флеш-ролика 1 строку кода, в которой мы зададим необходимый нам параметр, и в стиле блока с флешем прописать z-index меньший, чем у блока, который будет перекрывать флеш.

Необходимый нам код будет выглядеть приблизительно так:

<head>
<script type="text/javascript" src="swfobject.js"></script>
</head>

<body>
<!--Вставляем флеш-ролик-->

<div id="myclip" style="z-index:1;">Здесь предупреждение, которое отобразится в случае, если у юзера не установлен флеш-плеер</div>

<script type="text/javascript">

var so = new SWFObject("Ваш флеш.swf", "mymovie", "Ширина флеша", "Высота флеша", "7", "#ffffff");

so.addParam("wmode", "opaque");

so.write("myclip");

</script>

<div style="z-index:2;">
<a class="picture" href="1.jpg">Что-то перекрывающее флеш</a>
</div>

</body>

Ниже приведены 2 примера:

1) флеш не перекрывается

2) флеш перекрывается

В начало


Free Web Hosting