Максим Покровский

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

Сделал за последнее время:


  • Добавил в портфель около 48-и новых работ:

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

Заказать мне работу
26.07

Размещаем что-либо поверх flash блока

Комментарии (4) CSS, HTML
Размещаем любой блок над флеш
      <div class="flash-wrap"> <!--  Нужен для того что бы размещенная ссылка была именно там где нужно нам, а не там где хочет она. -->
         <a class="flash-link" href="#">Перейти на PokrovBlog</a>
         <object type="application/x-shockwave-flash" data="flash.swf" width="180" height="220">
            <param name="wmode" value="opaque"> <!-- Флеш ведет себя так как нам надо. Если он лежит в body, то слои будут его закрывать, если в слое - то он закрывает нижние (по z-index) слои и закрывается верхними. Фон имеет фоновый цвет. Без этой штуки работать ничего не будет. -->
            <param name="movie" value="flash.swf" />
            <param name="quality" value="high" />
         </object>
      </div>
         .flash-wrap{
            position: relative;
            }
         
         .flash-link{
            position: absolute; top:0px; left:0px;
            }

Это наитипичнейшый пример, но иногда требует нечто более сложное. Например, мне нужно было сделать чтобы баннер с активной ссылкой (то есть уже вшитой в код самого флеша), вел на другой адрес.

Размешаем активную область над флеш.
      <div class="flash-wrap">
         <a class="flash-link" href="#"></a>
         <object type="application/x-shockwave-flash" data="flash.swf" width="180" height="220">
            <param name="wmode" value="opaque">
            <param name="movie" value="flash.swf" />
            <param name="quality" value="high" />
         </object>
      </div>
      .flash-wrap{
         position: relative;
         }
     
      .flash-link{
         position: absolute; top:0px; left:0px;
         width:180px; /*Размеры флешки*/
         height:220px;
         background: url('images/0.gif') no-repeat; /*Особенный костыль для всех IE. Если фона нет, то воспринимается ссылка вшитая во флеш, а не наша. Думаю понятно, что 0.gif это прозрачный однопиксельный гиф.*/
         }

Пример

Метки:, ,

Комментарии

  1. 1
    Jman (27.07.2009) #

    Помню время когда я узнал про

    param name="wmode" value="opaque"

    , для меня это было как откровение. До этого считал что флешь ничем перекрыть нельзя

  2. 2
    const (24.09.2009) #

    а в Опере (9.52) почему-то не работает

  3. 3
    Руслан Секретный (05.11.2009) #

    Как сделать div поверх flash баннера, если баннер вызывается через JS?

    А кто подскажет как решать данную проблему, если нужно что бы div был поверх флеш баннера, а баннер вызывается через JS и параметр wmode прописать не получается, так как его нет. Как решить данную проблему?

    – нет куда прописать

    Может это должно решаться на стороне баннерной системы?

  4. 4
    Максим Покровский (06.11.2009) #

    Может это должно решаться на стороне баннерной системы?

    Да.

Они читают меня, я читаю их

    — Мало родить идею, надо еще найти в себе силы для ее реализации

    Rambler's Top100