Поиск по этому блогу

четверг, 28 октября 2010 г.

Как перекрыть flash или сделать flash ссылкой

Способ не новый и описан он в статье  Как перекрыть flash . 
В основном базируется на использовании параметра <param name="wmode" value="opaque" /> внутри тела тега <object>.
Дело в том что перекрыть такой объект дивом  какимто контентом не составит труда, но вот что будет в случае когда нужно не добавить какую то надпись поверх флеша, а придать нашему флешу свойство ссылки (ведь часто бывает что из флеша нужно сделать баннер и приходиться его декомпилить а потом пересоберать)? Первое что приходит на ум перекрыть флеш дивом с ссылкой в тексте которой указать неразрывный пробел (&nbsp;) и вуаля. В общем работать такой вариант конечно же будет - но не в ИЕ. Такой "пустой" контейнер хоть и займет свое место на страничке, но будет находиться под флешкой. Для утихомиривания ИЕ необходимо просто вместо текста ссылки (в нашем случае &nbsp;) вставить однопиксельную прозрачную картинку и наш флеш станет линком даже в ИЕ. 
Такой вариант я проверил на работоспособность в Mozilla, IE8, IE7, IE6, IE5


Напоследок приведу хоть немного кода :)

<div style="position: relative;">
   <div id="overlay" style="position: absolute; height: 225px; width: 354px; z-index: 200; top: 0px; left: 0px;">
<a href="link_some_where.html" style="display: block; height: 100%; width: 100%;"><img width="100%" vspace="0" hspace="0" height="100%" border="0" src="1px_transperent.gif"></a>
</div>
<object width="354" height="225" align="middle" data="Banner.swf" type="application/x-shockwave-flash">
    <param value="sameDomain" name="allowScriptAccess">
    <param value="Banner.swf" name="movie">
    <param value="high" name="quality">
    <param value="opaque" name="wmode"><!-- this needed for overlaying flash-object -->
    <param value="#DFE9F4" name="bgcolor">
    <!-- do not reformat next line - you will get gap under image in ie when flash is off -->
<a href="
link_some_where.html"><img width="354" height="225" border="0" src="NonFlashBanner.jpg"></a></object>
</div>

Комментариев нет:

Отправить комментарий