cssor.ru - Сайт о CSS и верстке сайтов, в помощь веб разаботчикам.

Html элементы поверх флеш

Дата: 15.03.2009
Html элементы поверх флеш

Здравствуйте дорогие читатели! Сегодня речь пойдет о решении одной специфической проблемы встречающейся при верстке сайтов. Специфическая она по той причине, что не связанна CSS багами позиционирования, речь пойдет лишь о html элементах. А конкретнее о том как поместить любой HTML элемент (div, img и пр.) поверх флеш элемента на html странице.

На практике мне не часто приходится верстать сайты с флеш элементами, поэтому я не подозревал о существовании данной проблемы, пока не столкнулся с ней “лицом к лицу”. В моем случае случилась ситуация, когда на странице горизонтальное выпадающее меню выпадало на флеш плеер в котором воспроизводилось видео, и оно выпадало под флеш плеер, чего собственно я оставить просто так не мог. Решение проблемы не заставило себя долго ждать и сейчас этим решением я поделюсь с вами.

Для начала я хочу сразу отметить, чтобы добиться того чтобы какой-либо html элемент был поверх флеш, нужно правильно вставить флеш на страницу. Рассказывать об этом в этой статье я не буду, приведу лишь ссылку на страницу, где об этом очень подробно и понятно рассказывается – ЧИТАЕМ. Во вторых, чтобы все выше сказанное не было просто словами, я покажу пример – вот он.

Надпись под флешем

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

“Лечится” это довольно просто, добавлением параметра wmode равным opaque. И html элемент который вы хотите поместить поверх флеш должен обязательно иметь свойство "position" со значением absolute или relative. Хочу еще раз сказать: главное правильно вставить флеш на страницу, тогда у вас не возникнет проблем с “лечением”. Приведу здесь пример “вылеченного” кода:


<div id="layer">
	<h1>Я хочу быть поверх Flash!</h1>
</div>

<div id="flashob">
	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="150">
		<param name="movie" value="wow.swf" />
		<param name="wmode" value="opaque" />
		 
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="wow.swf" width="200" height="150">
		<param name="wmode" value="opaque" />
        <!--<![endif]-->
        <p>Alternative content</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->

	</object>
</div>

И вот его CSS:

body, html {
font-family: Verdana, Arial;
color:#bf100a;
text-align:center;
margin:50px 0 0 0;
padding:0;
}
#layer {
width:100%;
position:absolute; /* Про position не забудьте */
margin-top:-40px;
*margin-top:-20px;
}
#flashob {
margin:0 auto;
height:1%;
}

Вот что получилось.

Теперь надпись поверх флеш

Как видите, надпись теперь располагается поверх флеш элемента. Код абсолютно кроссбраузерен (работает во всех браузерах).

Очень часто флеш на страницу вставляют при помощи swfobject, его “лечение” (то бишь добавление параметра wmode равным opaque) тоже не составляет труда. Вот так это делается:


<script type="text/javascript">swfobject.embedSWF("wow.swf", "flashlayer", "100%", "100%", "8", null, null, {menu:"false", wmode:"opaque"});</script>

Здесь лишь представлена часть кода, который подвергся изменениям, остальные части кода остаются без изменений.

17.03.2009

здравствуйте, я ещё совсем новичок в создании сайтов.. нашла вашу статью про flash облако тегов на http://www.w-blog.ru/..
хотелось бы тоже такое поставить на свой сайт, но я не могу понять как =(( пожалуйста, помогите...
у меня вместо flash высвечивается вот такое - http://otdoxni.ucoz.com/
вы только не пугайтесь от увиденного, я ещё только пытаюсь что-то сделать *стеснительно*

17.03.2009

Veronika здравствуйте!
ВО первых раз статья на том сайте, то давайте в рамках того топика и будем обсуждать облако тегов.
И как я вижу на вашем сайте в блоке с облаком тегов не срабатывает php код, разберитесь как это делается и возможно ли это вообще. Обычно на бесплатных платформах этого делать нельзя. И внимательнее вставляйте код.

17.03.2009

Спасибо большое, что ответили, и извините за беспокойство, я уже нашла причину своей ошибки.. для сайта Ucoz просто нужен был другой скрипт...

01.04.2009

Я столько вертела и крутила скрипт, что уже психовать начала. А тут оказывается не все так сложно, как кажется на первый взгляд.

06.04.2009

Хорошо что я занимаюсь пока просто хтмл) но за решение спасибки буду иметь в виду

06.04.2009

Простой и лёгкий выход) автору зачет, книжечку протяните

06.04.2009

Автор а у вас какие расценки на верстку сайтов?

06.04.2009

Олег
http://w-blog.ru/contact - тут мои контакты, велкам.

Я знал что наступит этот момент и этот блог будет приносить мне заказы ). В ближайшем будущем опубликую расценки.

23.04.2009

Приветствую!

Долго, даже очень, бьюсь с проблемой размещения текста поверх *.svg картинки... Суть проста: два позиционированных div-a, в одном *.svg-пикча, в другом - текст... В FF и опере - все просто супер, даже без применения z-index-а, в осле - просто засада... картинка всегда впереди... и никак я не могу с ним справится... Может у Вас будут какие-нибудь идеи решения проблемы...

23.04.2009

chicha здравствуйте!
А зачем вы используете svg картинки? На веб сайтах обычно jpg, gif, png - я другие форматы вообще не использую, поэтому ничего не знаю про svg.
Как вариант попробуйте position:absolute; или position:relative; вместе с z-index

23.04.2009

Про svg-пикчи - то причуда заказчика... Нравиться ему чтоб все было ровненько... вот и мучает меня с векторными рисунками в HTML-е. Его каприз, как я думаю, связан с тем, что используются скругленные углы... А сейчас просто дошло до того, что мне уже просто самому интересно узнать как заставить этот svg убраться назад и быть размещенным позади всех... Вопрос самоудовлетворения... :-)

23.04.2009

chicha
я так никогда не извращался над сайтами ), на этом сайте тоже есть скругленные углы, разве они плохого качества, думаю нет. И жпеги и пнгэхи можно сделать приличного качества. Единственное что могу посоветовать, поиграйтесь с позиционированием и z-index у самих картинок или у дивов которые можно использовать как контейнеры для этих картинок. И еще побалуйтесь свойством display для всего вышеперечисленного.

24.04.2009

Пасиба, но ночего не выходит! :-( Остается тока через JavaScript пробовать...

28.04.2009

У меня не выходит Flash, чтобы не перекрывал. :-(
Такое ощущение, что не отрабатывается [IF IE].
Подскажите, у всех срабатывает?

28.04.2009

TropicCamel
советую внимательно прочитать статью и посмотреть пример указанный в ней. Если мой пример работает(а он работает), значит ошибка у вас в коде.

02.05.2009

Здравствуйте.
Очень интересное решение. И сразу хочу задать вопрос. Захотелось сделать флеш ссылкой. Как тут и описано применил wmode:"opaque" к самой флеш, тег <a> сделал блоком, задал абсолютное позиционирование, разместил над флеш. В фф, сафари, хром - как и ожидалось - ссылка появилась. Но в опере и ие ее нет. Кто подскажет, как быть?

04.05.2009

Действительно небольшой гемор) легко решайм

04.05.2009

как раз занимаюсь веб дизайном оптимизацией сайтов и продвижение сайта в Петербурге, и попал с этим гемором, спасибо автор

07.05.2009

а зачем отделять для ие или нет?
проще убрать разделение и пусть оно будет для всех...работать будет везде, а кода будет меньше!

09.05.2009

Евгений, что-то вы перестали добавлять свои полезные CSS-секретики. Часто пользовался вашими советами, реально полезные многие, респект вам за это. Но хотелось бы и продолжения ;) хотя бы изредка.

17.05.2009

В FF 3.0 не работает. На официальном сайте комментариев по делу не нашел. Стоит Flash 10.
Сам боролся с этой проблемой, во всех браузерах можно поместить поверх, а в FF 3.x никак ничего не получалось и не получается до сих пор.

17.05.2009

Ой, сори все заработало ;) Автору спасибо.

05.06.2009

Здравствуйте.
Прекрасная статья, спасибо! Очень помогла!

Вы не могли бы подсказать:
Как сделать, чтобы при переходе с одной
странице на другую Flash не перезегружался?

05.06.2009

diesel
Нет, к сожалению не знаю.

08.06.2009

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

и всё хорошо работает

08.06.2009

а код то не записался!!!
почему?

10.06.2009

спасибки приятно что кто-то делиться своми знаниями

12.06.2009

Нашел еще более легкий вариант - это вставка флеша с помощью JavaScript, в этом случае на flash действует z-index, причем корректно во всех браузерах.

function AnySWF(swfPath, swfWidth, swfHeight) { var Content = ''; Content = '' + '' + '' + '' + '' + '' + '' + '' + ''; document.write(Content); }
29.06.2009

Это конечно всё хорошо. Вполне стандартный способ. Лучше бы написать статью - как в ИЕ сделать так, что бы абсолютный элементы оказывались выше тега "select". Как бы блок не был спозиционирован - он всеравно уходит под селект.

30.06.2009

А с видео такая тема не работает=(
подскажите как быть с видео?

30.06.2009

Alex
Смотря как это видео подключается на страницу, если вы прочитали всю статью, то я писал что я впервые столкнулся с этим именно когда подключал видео на сайте. Пробуйте, должно получиться.

30.06.2009

имею ввиду embed type="application/x-mplayer2"
для такого способа

01.07.2009

Alex
Я не знаю что это за способ, принцип (описан в статье) у всего один и тот же, пробуйте... Я не супер гуру и определить с первого взгляда, что надо вам сделать чтобы получился нужный результат, мне вряд ли удастся. А сидеть и ковыряться в коде за вас у меня желания нет.

21.07.2009

Извиняюсь, код не опубликовался. Тогда смотрите в коде страницы (внизу).

26.07.2009

Интересно, продолжение будет?

26.07.2009

Красивое решение,но я считаю,что и без него можно обойтись

26.07.2009

когда новая статья будет?

02.08.2009

Добрый день ..
Я смотрю вы тут помогаете людям с прописаннием ява и html скриптов .....
Вот и я решил обратиться за помощью ......
Проблема в следующем:
У меня есть сайт .
У меня есть флеш плеер.
И у меня есть видео (потоковое) которое прекрасно считается и всё с тем связанное ....
Но проблема в том,что у меня часто воруют скрипт плеера,а так же саму ссылку на потоковое видео и выставляют на других сайтах ....
Так вот я подумал:
А можно сделать так,чтобы скажем в левам,нижнем углу был скажем логотип моего сайта (картинка)?
Так я смогу раздавать готовый скрипт рекламируя свой сайт ....
Вот пример подобного скрипта:
http://tvali.ge/index.php?action=sat&channel=968 (потоковое)
http://tvali.ge/index.php?action=watch&v=138392 (Загруженное)

Ну думаю вы поняли,что мне нужно )))

03.08.2009

А в самой флешке такой фокус нельзя провернуть?

04.08.2009

Можно через адобе!

04.08.2009

А можно по подробней ? Честно говоря я просто не представляю как это делается .....

04.08.2009

Иракли, вы обратились не по адресу. Здесь мы обсуждаем вопросы связанные с CSS (стилевое оформление сайтов).
В вашем вопросе Богдан вам верно подсказал, делаете логотип в самом флеш плеере и раздаете код. Редактировать флеш плеер или делать новый (с вашим лого) умеют только флешеры, если не рубите в этом, то только заказывать.

P.S. Сайту нужен форум?

25.08.2009

Здравствуйте! Посдскажите пожалуйста: проэксперементировал по этому уроку (просто вставил этот код и изменил ссылки на swf). Да, что качается размещения поверх - все отлично, и с первого раза получилось свой слой наложить, но вот проблема - на swf есть несколько мувиклипов - которые реагируют на наведение мыши, и при щелчке переходят по ссылке (сделано - AS2, Flash CS3), везде они норм. работают, но тут перестали - и так и сяк пробовал, просто вообще ни на что не реагируют.

25.08.2009

Anatoliy_32
Я понял о чем вы, сталкивался с таким. К сожалению не знаю как это исправить.

27.08.2009

А нельзя ли создать форум по этой теме хотя бы?

28.08.2009

Кстати правильно, то есть несколько вопросов, в коментах их озвучивать как-то не очень

29.08.2009

Занимаюсь изучением html,css,до такого пока не дошла,но думаю пригодится в будующем.Заранее спасибо так чказать).

01.09.2009

Пишите еще статьи про хтмл,ссц и все что связано с созданием сайтов.
У вас очень доходчиво получается обьяснять.Хорошо бы было отделить отдельно колонку,чтобы там все писали свои проблемы,делились опытом.

02.09.2009

Спасибо за отзывы, я рад что сайт оказался полезным. К сожалению в данный момент не могу заниматься его развитием. Займусь развитием сайта как только это станет возможно.

03.09.2009

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

04.11.2009

Интересный метод, даже не думал что можно такое вытворять! Огромное спасибо за статью!

Как сделать div поверх flash баннера, если баннер вызывается через JS?

А кто подскажет как решать данную проблему, если нужно что бы div был поверх флеш баннера, а баннер вызывается через JS и параметр wmode прописать не получается, так как его нет. Как решить данную проблему?

– нет куда прописать

Может это должно решаться на стороне баннерной системы?

08.11.2009

в общем супер по лучше чем другие блоги!

13.11.2009

мне очень понравилось! супер блог! из 10 мной нашедших этот самый лучший! супер! автору спасибо!

13.12.2009

Великолепно! С такими функциями можно много творить...

15.12.2009

Здравствуйте!
Подскажите - где копать? -есть необходимость подключить swf-ролик через таблицу стилей.
Есть ли такая возможность? Может быть есть пример..
Спасибо.

Я вообще считаю, что флеш - зло. Html форева.

12.01.2010

сайт понравился, интересно

19.01.2010

С Максом я несогласен

25.01.2010

Добрый день всем! Подскажите пожалуйста. Установил флеш анимацию на шапке сайта (цельная картинка jpg) - уская полоска с изменяющимся текстом (не реклама). Открыл в своем IE8 - работает отлично. Открываю в мозиле и опере - просит установить плагин. Устанавливаю плагин - работает отлично. Меня беспокоит вопрос - не станет ли это проблемой? Не снизит ли посещаемость сайта? Ведь у всех браузеры разные. Заранее благодарен.

26.01.2010

Я с Максом согласен

26.01.2010

Спасибо за совет

27.01.2010

Хороший совет

27.01.2010

Ничего не понял

27.01.2010

Все не так сложно как кажется

29.01.2010

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

02.02.2010

В сафари 4 не работает

03.02.2010

Спасибо, у меня все получилось

05.02.2010

Спасибо

А как победить Safari 4 на Windows 7? Flash упорно лезет наверх.
На других браузерах и осях удалось порешать -- вылез windows7+safari4 :(

20.02.2010

Все не так сложно как кажется

28.02.2010

- Та же проблема - windows 7 Safari. Все рвется вверх!

04.03.2010

Ничего сложного! Просто делайте по методу автора. Я потом выравнивял margin-top как мне было удобней и все.
Автору - спасибо!

C margin-top имеется проблема с Сафари. Выровнять нужно по другому..

09.03.2010

Спасибо вам большое!
Всё прекрасно заработало. Простое и приятное решение.

19.04.2010

В сафари 4 не работает

21.04.2010

Полезная инфа

21.04.2010

Автор молодец

21.04.2010

спасибо за ваш труд

30.04.2010

А я даже не знал, что такое возможно (

17.05.2010

Пришёл к выводу, что самое оптимальное - встраивать флэш скриптом, предварительно сбалансировав блок флэша z-inex'ом ниже

21.05.2010

очень полезная информация

01.06.2010

Очень интересно

01.06.2010

Спасибо

11.07.2010

отлично

19.07.2010

круто

03.11.2010

я просто добавил wmode="opaque" и все работает : )

06.11.2010

А это работает в сафари ?

19.11.2010

подобная работа требует больших умственных напряжений. Хотелось бы предостеречь от переутомления, иначе лечение в клинике неврозов вам обеспечено...

11.12.2010

Флэш - это зло в принципе. У меня на работе он вообще не работет. Я за сайты с хтмл-минимальзмом...

05.01.2011

Здравствуйте.
такая проблема:
мне нужно наложить ссылку поверх флеш
в IE все работает, а вот в опере и мозиле не хочет.
Вот css ссылки и флеш:
/*ссылка на флэшку чести*/
.chesta
{
left:60px;
width:160px;
height:160px;
border:0px solid black;
background:red; filter:alpha(Opacity=0);/*от 0 до 100*/
Opacity: 0; /*От 0 до 1*/
position:absolute;
z-index:20;

}

/*собственно сама флэшка чести*/
.chesti
{
left:0px;
border:0px;
position:relative;
z-index:1;
}
ваш пример вставки флеш я рассмотрел но почему то работать корректно не хочет.
Спасибо.

31.01.2011

1. Как-то уже видел данный вариант вставки swf и работал он не корректно.
2. Данный вид позиционирования не лечит проблему swf в Safari 5

04.02.2011

Приведенные примеры верстки не работают в Safari и Chrome

08.02.2011

Автор, спасибо вам огромное, ваше решение, решило проблемы во всех браузерах. У меня java меню накладывалась поврех флеша в опере нормально, но без прозрачности.
В эксплорере и мозиле тоже самое. А в хроме который набрал уже такой оборот, вобще залазило под флеш. ВАШ КОД решил все проблемы под корень!.
Спасибо!

27.05.2011

круто,спасибо вам огромное.

30.05.2011

Респект за статью!

12.06.2011

Спасибки, помогло, автору респект

28.06.2011

Постовой - предложение о размещении -- Здравствуйте. Интересует размещение постового в вашем блоге. Тематика сайта: пластиковые окна. Если вы согласны на добавление постового с нужным мне анкором и URL, опишите еще раз условия его размещения. И заодно напомните URL вашего блога. -- Заранее благодарен за ответ.

29.07.2011

...
...
24.09.2011

помогли чайнику..
спасибо.
(зашёл с гугла по поисковому запросу)

11.10.2011

The credit loans suppose to be very useful for guys, which want to ground their organization. By the way, that's comfortable to get a auto loan.

23.11.2011

гыгы, шикарненько, как раз делал курсач и столкнулсо с стакой проблемкой) решено за несколько движжений)) спасибос!)

23.11.2011

swf.param("wmode","opaque");

еще возможен такой вариант))

28.11.2011

В эксплорере и мозиле тоже самое. А в хроме который набрал уже такой оборот, вобще залазило под флеш. ВАШ КОД решил все проблемы под корень!.
Non-Stop Traffic Formula

13.12.2011

maths tuition
После связанные сообщение прочитал тему сейчас я чувствую, что мои исследования практически завершен. Благодаря долю этой блестящей материи.

14.12.2011

Я думаю, что эти тенденции повторить ее растущее признание, а может быть предсказуемым участия в прессе и общенациональной политикой. Мой совет: будьте осторожны, «не хаос с треками.
merchant services

17.12.2011

А конкретнее о том как поместить любой HTML элемент (div, img и пр.) поверх флеш элемента на html странице.los angeles carpet

23.12.2011

тим именно когда подключал видео на сайте. Пробуйте, должно получиться.
Web Design London

вторых, чтобы все выше сказанное не было просто словами, я покажу пример
Glasgow Web Design

не все так сложно, как кажется на первый взгляд.
los angeles dui lawyer

28.03.2012

это довольно просто, добавлением параметра wmode ра..
seo los angeles

нет проблем с “лечением”. Приведу здесь пример “вылеченного” кода:
bolsas reutilizables

го ждать и сейчас этим решением я поделюсь с вами.
reusable shopping bags