wmode - наложить рисунок на флешку, прозрачная флешка

Как наложить рисунок поверх флешки, чтобы перекрыть всю её или часть (в зависимости от размера рисунка)?

Размещение абсолютно позиционируемого div с фоновым рисунком и z-index:1000 по идее должно помочь. Ан нет - не так все просто. Флешка почему-то располагается поверх рисунка, хотя по z-index должно быть всё наоборот.

Как включить отображение прозрачности у флешки?

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

Немного теории

Оказывается, для объектов флеш в html определен параметр wmode, который задает режим внедрения элементов флеш в web-страницу. По умолчанию параметр wmode имеет значение window, который определяет наложение флешки поверх всего html. Таким образом, независимо от значения z-index и позиционирования элементов поверх флешки рисунок отображаться не будет.

Парамтер wmode может принимать и другие значения:

  1. opaque (англ. непрозрачный), аналогичен режиму window, но позволяет перекрывать флешку HTML-слоями, используя z-index. Как раз то, что нужно! Используем этот режимдля наложения рисунка поверх флешки - вопрос один.
  2. transparent (англ. прозрачный) в отношении позиционирования флеш-элементов похож на предыдущий -  возможность размещения слоев HTML поверх флешки осталась. К тому же, фон флешки может быть прозрачным. Следует отметить, что при вставке флешки в режиме transparent возможно замедление работы браузера!

Переходим к практике :)

Задавать значения для wmode можно как атрибут для тега embed или object:

<object wmode="opaque" ... />

Либо через тег param:

<object>
<param name="wmode" value="opaque" />
...
</object>

Более подробно с описанием параметра wmode можно ознакомиться на сайте Adobe в разделе справочной системы по Flash.

Метки: , ,

Опубликовано Воскресенье, Май 2, 2010 в 12:51 в следующих категориях: Без рубрики. Вы можете подписаться на комментарии к этому сообщению через RSS 2.0. Вы можете добавить комментарий, или trackback со своего сайта.

Автор будет признателен, если Вы поделитесь ссылкой на статью, которая Вам помогла:
BB-код (для вставки на форум)

html-код (для вставки в ЖЖ, WP, blogger и на страницы сайта)

ссылка (для отправки по почте)

Комментарии (2) к записи “wmode - наложить рисунок на флешку, прозрачная флешка”

  1. Роман сообщает Май 8th, 2010 в 06:10 :

    спасибо,не мог вставить прозрачную флешку,теперь вставил

  2. masster сообщает Май 2nd, 2012 в 14:25 :

    wmode = transparent позволяет задать флэшке прозрачность.
    А чтобы вставить ссылку поверх флэшки можно воспользоваться абсолютным позиционированием ссылки (z-index)


    И стили
    div#flash-hover {
    position:absolute;
    left:50%;
    margin-left:-460px; /* выравнивание от центра экрана.. для конкретного случая*/
    top:420px;
    z-index:110;
    width:201px;
    height:190px;
    }
    div#flash-hover object {
    position: relative; /* чтобы можно было указать z-слой */
    z-index: 110; /* задаем z-слой меньше, чем у ссылки */
    }
    div#flash-hover a{
    position:absolute;
    display:block;
    width:201px;
    height:190px;
    left:0;
    top:0;
    z-index:120;
    /*text-indent: -9999px;*/
    background:url(/blank.gif); /*Чтобы разместить ссылку поверх флэшки в ie обязательно нужен фон!*/
    }

Добавить комментарий