| Решение DIV поверх флэш |
|
У веб-разработчиков существует известная проблема — как расположить DIV (или что либо другое) поверх flash-объекта внутри html-страницы. Стандартные манипуляции, типа z-index не помогают. И бедные разработчики начинают проклинать flash, хотя это совершенно напрасно, так как раз он здесь не при чем. Корни гораздо глубже. Существует стопроцентно кроссбраузерное решение. Хотя может это и не очень официально со стороны Adobe, но тем не менее, именно этот метод, они используют у себя на сайте. При размещении Flash на странице (совершенно не важно, каким методом, будь-то стандартным от Adobe, либо используя SWFObject) необходимо использовать атрибут/параметр wmode тэга object/embed со значением «opaque». Естественно — это только первый шаг. О том как позиционировать глубину «дивов» — здесь мы рассказывать не будем. Вот рабочий пример:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>BestDesign.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">swfobject.embedSWF("main.swf", "promo", "100%", "100%", "8", null, null, {menu:"false", wmode:"opaque"});</script>
<style> /* hide from ie on mac \*/
html { height: 100%; overflow: hidden; }
#promo { height: 100%; }
/* end hide */
body { height: 100%; margin: 0; padding: 0; background-color: #000; color: #fff; font-family: Tahoma, arial; font-size: 11px; }
p { margin: 0; padding: 0;}
a { color: #999; }
#over-holder { position: absolute; z-index: 3; margin: 1px 0 0; padding: 20px; width: 400px; height: 30px; background: #000; opacity: .5; }
#promo { position: absolute; z-index: 2; background: #ffcfcf; }
</style>
</head>
<body>
<div id="over-holder">
<p>текст поверх флешь ролика.</p>
<p><a alt="BestDesign." title="BestDesign." href="http://www.bestdesign.com.ua">BestDesign.</a></div>
<div id="promo">
<h1>Пришло время установить Flash Player</h1>
<p><a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
</body>
</html>
Теперь, манипулируя значениям z-index, вы можете размещать поверх flash все что угодно. P.S. Кстати, насчет атрибута wmode, раньше существовало недоразумение со стороны официальной документации и наверно отсюда и пошло недоверия к этому свойству: «This attribute/parameter works only in Windows with the Flash Player ActiveX control» — т.е. данный атрибут работает только под Windows и IE (это документация трехлетней давности). |