PDA

Просмотр полной версии : Как победить перекрывания flash роликом элементов на веб странице


alex45
14.03.2012, 17:31
Здравствуйте!
Тема может показаться вам заезженной и неактуальной, но если бы все было так просто, то я бы не писал :)
Вопрос: Имею страницу сайта с различными div блоками, которые должны отображаться поверх flash ролика, но этого не происходит и они перекрываются самим роликом. Что можно сделать?
Дополню: Я использовал всем известные параметры ролика wmode "opaque" и "transparent" в коде страницы, но не помогло. Так же указал для блоков разные z-index и тоже не помогло.
Обращаю внимание на то, что flash ролики создавал не я и исходников у меня нет, иначе бы при компилировании ролика я бы настроил параметры публикации "opaque" или "transparent". Поэтому лично мне кажется, что проблема кроется в этом. Но все равно я буду рад любой помощи с вашей стороны)

mooncar
14.03.2012, 17:57
"opaque" и "transparent" - верно.
Исходники тут не нужны. Проблема в верстке.
Ссылка на проблемную страницу была бы актуальна.

postoronniy
14.03.2012, 17:59
Привет!
Недавно была такая же проблема. Чат с оператором залезал на рекламные ролики на сайте www.restoreit.ru.

Решил так:

<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
<?php if (!empty($width)) echo 'width ="'. $width.'"';?>
<?php if (!empty($height)) echo 'height ="'. $height.'"';?>
>
<param name="movie" value="<?php echo $imageurl;?>" />
<param name="wmode" value="opaque" />
<embed
src="<?php echo $imageurl;?>"
loop="false"
pluginspage="http://www.macromedia.com/go/get/flashplayer"
type="application/x-shockwave-flash"
WMODE="transparent"
<?php if (!empty($width)) echo 'width ="'. $width.'"';?>
<?php if (!empty($height)) echo 'height ="'. $height.'"';?>
/>
Обсуждение здесь: http://joomlaforum.ru/index.php/topic,205110.0.html, результат здесь: www.restoreit.ru

alex45
14.03.2012, 18:07
Спасибо за помощь, буду проверять метод postoronniy.
А пока код проблемной области:

<div id="border-game">Этот блок должен быть поверх следующего</div>
<div id="block-play-game">

<?php
echo '<PARAM NAME=movie VALUE="'. $embed_src .'">
<PARAM NAME=quality VALUE="high">
<PARAM NAME=bgcolor VALUE="'. $game->bgcolor .'">
<PARAM NAME="menu" VALUE="false">
<PARAM NAME="wmode" VALUE="opaque">
'.$wttrans2.'
<EMBED id="flash1" src="'. $embed_src .'" wmode=transparent"'. $game->bgcolor .'" width=700"'. $maxwidth .'" height="500"'. $maxheight .'" name="'. $game->title .'" ALIGN="" menu="false" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"'.$wttrans.'>
</EMBED>
</OBJECT>';
?>
</div>

mooncar
14.03.2012, 18:27
Оборачиваем всё в блок с position:relative и задаем стили, как ниже:
<div style="position:relative">
<div id="border-game" style="position:absolute; z-index:1">Этот блок должен быть поверх следующего</div>
<div id="block-play-game" style="position:absolute; z-index:0">
<?php
echo '<PARAM NAME=movie VALUE="'. $embed_src .'">
<PARAM NAME=quality VALUE="high">
<PARAM NAME=bgcolor VALUE="'. $game->bgcolor .'">
<PARAM NAME="menu" VALUE="false">
<PARAM NAME="wmode" VALUE="opaque">
'.$wttrans2.'
<EMBED id="flash1" src="'. $embed_src .'" wmode=transparent"'. $game->bgcolor .'" width=700"'. $maxwidth .'" height="500"'. $maxheight .'" name="'. $game->title .'" ALIGN="" menu="false" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"'.$wttrans.'>
</EMBED>
</OBJECT>';
?>
</div>
</div>

И поправьте wmode в <embed> или <object>, у вас он разный там в них.

Должно решить задачу.

alex45
14.03.2012, 19:10
mooncar, сделал так как вы написали, но ничего не изменилось.
Есть какие нибудь еще варианты, может через javascript можно сделать?)

mooncar
14.03.2012, 19:13
Нет, JS не надо трогать.
Без ссылки, без контекста общего документа тяжело понять, почему у вас там так.

alex45
14.03.2012, 19:46
mooncar, разобрался я наконец то))
Проблема была тривиальной...необходимо было добавить тег <embed> в начале кода. Раньше этот тег стоял раньше, но почему то не привязывался к началу этого блока с кодом. Вот рабочее решение:

<div style="position:relative">
<div id="border-game" style="position:absolute; z-index:1">Этот блок должен быть поверх следующего</div>
<div id="block-play-game" style="position:absolute; z-index:0">

<?php

echo '<object>';

echo '<PARAM NAME=movie VALUE="'. $embed_src .'">
<PARAM NAME=quality VALUE="high">
<PARAM NAME=bgcolor VALUE="'. $game->bgcolor .'">
<PARAM NAME="menu" VALUE="false">
<PARAM NAME="wmode" VALUE="opaque">
'.$wttrans2.'
<EMBED id="flash1" src="'. $embed_src .'" wmode=transparent"'. $game->bgcolor .'" width=700"'. $maxwidth .'" height="500"'. $maxheight .'" name="'. $game->title .'" ALIGN="" menu="false" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"'.$wttrans.'>
</EMBED>
</OBJECT>';
?>
</div>
</div>

mooncar
14.03.2012, 20:22
<object> только...
Ну отлично.

Чтобы забыть рукописные <object> и <embed> как страшный сон, правильность и соответствие всех их параметров, исключить необходимость предварительного клика, используйте для публикации флешки SWFObject (http://designformasters.info/posts/flash-embed-with-swfobject-2/).

alex45
14.03.2012, 22:18
Вопрос решен :)
mooncar, postoronniy, спасибо за помощь!