Я уже касался этой темы в посте http://blog.codething.ru/posts/69, но решение через jQuery.SWFObject Plugin оказалось не универсальным и, в частности, совсем не работает в браузере Google Chrome. В остальных браузерах тоже работает не очень хорошо, так, например, при наведении на баннер курсор мыши не становится активным, как при наведении на гиперссылку.
Что же делать?
После долгих поисков и изучения данной проблемы задача была решена! Правда для удобства, решение все же использует библиотеку jQuery.
<div id='b1' style='overflow: hidden; width: 200px; height: 200px;'> <object type="application/x-shockwave-flash" data="filename.swf" width="200" height="200"> <param name="wmode" value="opaque"> <param name="movie" value="filename.swf" /> </object> <div id="b2" style="z-index: 100; position: absolute;" width="200" height="200"> <a href="http://blog.codething.ru/"><img src="x.gif" width="200" height="200"/></a> </div> </div> <script> $(document).ready(function(){ p = $('#b1').position(); $('#b2').css("left", p.left+'px'); $('#b2').css("top", p.top+'px'); }); </script>
Теперь баннер отображается корректно, курсор активируется как положено.
Смысл решения очень прост. Сначала в документе выводится flash-баннер. Измеряются его координаты, относительно начала документа, и на это же самое место, но поверх баннера, накладывается слой с прозрачной картинкой и ссылкой в нужное место. Все очень просто и красиво.
В приведенном коде размещается баннер filename.swf размером 200x200 px. Прозрачная картинка x.gif - однопиксельный gif-файл с прозрачностью.