Новости
Дата: 15.03.2009
Здрастуйте дорогі читачі! Сьогодні мова піде про рішення однієї специфічної проблеми зустрічається при верстці сайтів. Специфічна вона з тієї причини, що не пов'язана 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>Тут лише представлена частина коду, який зазнав змін, інші частини коду залишаються без змін.