Рецепты — DIV поверх флэш — team Inc. — графический дизайн, разработка сайтов и интерфейсов

Рецепты — DIV поверх флэш

Раздел — Статьи
Дата публикации — 23/01/2009

Геннадий Уханов

У веб-разработчиков существует известная проблема — как расположить DIV (или что либо другое) поверх flash-объекта внутри html-страницы. Стандартные манипуляции, типа z-index не помогают. И бедные разработчики начинают проклинать flash, хотя это совершенно напрасно, так как раз он здесь не при чем. Корни гораздо глубже.

DIV поверх флэш

Существует стопроцентно кроссбраузерное решение. Хотя может это и не очень официально со стороны 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="en" xml:lang="en">
	<head>
		<title>team Inc.</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="favicon.ico" />
		<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>When the power of love overcomes the love of power, the world will know peace.</p><p><a alt="team Inc." title="team Inc." href="http://teaminc.ru">team Inc.</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 (это документация трехлетней давности).

Проверено — это работает везде. И в нынешней документации такого утверждения больше нет.

team Inc. ♥ CSS3 и border-radius, в частности

Рецепты — DIV поверх флэш