Выводим заглушку если нет Flash

25.11.2012
Показываем картинку если flash player не установлен.

Именно если не установлен! Если он заблокирован, то способ не сработает.

1
2
3
4
5
6
7
8
9
10
 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="200">
    <param name="movie" value="exchange.swf"/>
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="exchange.swf" width="200" height="200">
    <!--<![endif]-->
        <img src="image.gif" width="200" height="200" alt="Альтернативное изображение"/>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>

*Данный код является валидным.

Естественно вместо картинки тут может быть любой контент, но ссылки в нем работать не будут т.к. они будут ниже слоем
Тогда нужно вытащить их «наверх» используя z-index, но текст ссылки тоже вылезет выше флешки.

Решение:
Сделать div у которого вместо текста размножить прозрачную картинку: 

<div id="flash_btn1"><a href=" /Test1/"><img src=" / images/blank.gif" width="100%" height="100%" alt="_" border="0"></a></div>

А в CSS задать ему размер, позицию и курсор:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
#flash_btn1
{
  cursor    : pointer;
  position  : absolute;

  width     : 104px;
  height    : 23px;

  top       : 318px;
  left      : 60px;

  z-index   : 3;
}

- без картинки IE воспринимает div пустым и не видит ссылки.

 

PHP вариант: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<?
  $sSWFPath = PATH.'/swf/test.swf';
  $sIMGPath = PATH.'/images/FlashPic.jpg';
  $width = 800;
  $height = 400;
?>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="<?=$width;?>" height="<?=$height;?>">
    <param name="movie" value="<?=$sSWFPath;?>"/>
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="<?=$sSWFPath;?>" width="<?=$width;?>" height="<?=$height;?>">
    <!--<![endif]-->
        <img src="<?=$sIMGPath;?>" width="<?=$width;?>" height="<?=$height;?>" alt="flash pic"/>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>

$sSWFPath – путь до флешь файла
$sIMGPath - путь до картинки
$width – ширина блока
$heigh – высота блока

 

Промер:

Альтернативное изображение

При отключенном флешь тут выводиться заглушка.

Категории: HTML
Яндекс.Метрика