Когда мы на своем сайте размещаем красивый flash баннер, то не стоит забывать, что flash проигрыватель далеко не у всех установлен (в моем случае, за последнюю неделю, у 44% посетителей нет flash). И на самом деле, чтобы не терять клиентов, необходимо всем посетителям, у кого отключен flash в браузере — выводить альтернативный баннер, например с упрощенной gif анимацией, или даже просто jpg заглушку.
Делается все довольно просто. Для этого мы будем использовать библиотеку swfobject.js.
Подключаем эту библиотеку в секции <head>
1 |
<script type="text/javascript" src="swfobject.js"></script> |
Далее выводим код инициализации, в котором мы указываем для нашего баннера минимальные требования к версии Flash проигрывателя.
1 2 3 |
<script type="text/javascript"> swfobject.registerObject("myId", "9.0.0"); </script> |
После в нужно месте страницы выводим код баннера, не забывая вместо test.swf указать путь до своего flash баннера. И укажите свои размеры.
1 2 3 4 5 6 7 8 9 10 |
<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="140"> <param name="movie" value="test.swf" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="test.swf" width="300" height="140"> <!--<![endif]--> <div>Код альтернативного баннера</div> <!--[if !IE]>--> </object> <!--<![endif]--> </object> |
Обратите внимание на id="myId" . Это ID вашего баннера. У каждого баннера он индивидуальный и не повторяющийся.
Для единичного баннера можно вывести все подряд, прямо в месте вывода баннера на странице. Пример кода баннера с одного из моих сайтов.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript"> swfobject.registerObject("bannerM4ik", "9.0.0"); </script> <div> <object id="bannerM4ik" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="300" height="140"> <param name="movie" value="images/baners/Motor4ik.swf" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="images/baners/Motor4ik.swf" width="332" height="200"> <!--<![endif]--> <a href="http://леха.com/" target=_blank> <IMG alt="" src="/images/baners/Motor4ik.gif" width="332" height="200" border=0> </a> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </div> |
Более подробный код с примером можно скачать с гитхаба.