wmode - наложить рисунок на флешку, прозрачная флешка
Как наложить рисунок поверх флешки, чтобы перекрыть всю её или часть (в зависимости от размера рисунка)?
Размещение абсолютно позиционируемого div с фоновым рисунком и z-index:1000 по идее должно помочь. Ан нет - не так все просто. Флешка почему-то располагается поверх рисунка, хотя по z-index должно быть всё наоборот.
Как включить отображение прозрачности у флешки?
При вставке на страницу прозрачной флешки в местах, где должна быть прозрачность, отображается однородный фон. Почему не определяется прозрачность?
Немного теории
Оказывается, для объектов флеш в html определен параметр wmode, который задает режим внедрения элементов флеш в web-страницу. По умолчанию параметр wmode имеет значение window, который определяет наложение флешки поверх всего html. Таким образом, независимо от значения z-index и позиционирования элементов поверх флешки рисунок отображаться не будет.
Парамтер wmode может принимать и другие значения:
- opaque (англ. непрозрачный), аналогичен режиму window, но позволяет перекрывать флешку HTML-слоями, используя z-index. Как раз то, что нужно! Используем этот режимдля наложения рисунка поверх флешки - вопрос один.
- transparent (англ. прозрачный) в отношении позиционирования флеш-элементов похож на предыдущий - возможность размещения слоев HTML поверх флешки осталась. К тому же, фон флешки может быть прозрачным. Следует отметить, что при вставке флешки в режиме transparent возможно замедление работы браузера!
Переходим к практике
Задавать значения для wmode
можно как атрибут для тега embed или object:
<object wmode="opaque" ... />
Либо через тег param:
<object> <param name="wmode" value="opaque" /> ... </object>
Более подробно с описанием параметра wmode можно ознакомиться на сайте Adobe в разделе справочной системы по Flash.
спасибо,не мог вставить прозрачную флешку,теперь вставил
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 обязательно нужен фон!*/
}