Позиционируем прозрачный flash

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

А для начала реальный примерчик:

просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто текст, просто просто текст, просто текст!!!

Посмотрим на код:

<div id="FlashDiv" style="position: absolute; top: 231.5px; left: 30%; z-index: 1;">
     <object id="swf">
        <embed src="/storylight/2006.03.15_15.55.30/123.swf" loop="true" quality="high" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" height="200" width="400">
     </object>
</div>

Устанавливаем абсолютную позицию, можно и слева и справа и даже снизу, но в нашем случае, чтобы не испортить дизайн сайта я установлю сверху. Делаем это в теге <div> т.к. див сам по себе контейнер, а это очень удобно: position: absolute; top: 231.5px; И есть еще один интересный момент, т.к. мы не указали справа или слева, элемент будет выровнен слева относительно своего родителя, например таблицы в которой он находиться.

Главным моментом прозрачности конечно является атрибут wmode="transparent". А сделать наш элемент Выше обычного текста нам помогло свойство z-index: 1;

Ну а выскакивание этого банера мы уже доверим вселюбимцу Javascript, который и выровняет флешь-банер по середине любого окна и поможет с такой же легкостью его убрать.

Оцени публикацию:
  • 5,18
Оценили человек: 5

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • если под флешом будет к примеру ссылка или текст, они же не будут доступни
    29 июня 2010, 10:19 коммент полезен : +2 # Alexandr
  • круто(yea)
    29 августа 2010, 14:59 коммент полезен : 0 # Гость
  • А есть способ, чтоб иконку в div поверх флэша сделать кликабельной, но чтоб при этом и сам флэш мог оставаться интерактивным, а не перекрываться насмерть этим самым дивом с иконкой? Вот был бы рад такому способу.
    16 декабря 2010, 10:15 коммент полезен : 0 # Любопытный
    • Об этому уже написано здесь http://yapro.ru/web-master/css/perekritie_prozrachnim_gif-izobrajeniem_flash-obiekta.html
      16 декабря 2010, 10:19 коммент полезен : 0 # Admin
      • Но там вообще не об этом. Может ссылку перепутали? По флэшу то при это как кликать-то? Он перестает быть для кликов интерактивным в этом варианте, совершенно. Я ж вопрос прислал - чтоб интерактивным оставался в полном объеме.
        16 декабря 2010, 12:05 коммент полезен : 0 # Любопытный
        • Понял теперь. transparent не катит слишком много ресурсов ест.
          16 декабря 2010, 12:43 коммент полезен : 0 # Любопытный
      • поясню - div поверх флэша всегда "заслоняет" собой флэш и тыкнуть по нему не дает. Есть один варварский способ - чтоб яваскрипт передавал флэшу, но это кривость... Вот и интересуюсь, может есть другой, нормальный метод, которого не знаю.
        16 декабря 2010, 12:08 коммент полезен : 0 # Любопытный
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2019 YaPro.Ru

Главная » Веб-мастеру » CSS »