Xiper

Ссылка на flash объекте

Автор: Евгений Рыжков Дата публикации:

Задача

Сделать ссылку с flash объекта. Многие могут сказать, что статья бесполезна, мол флешер должен прописать ссылку в коде объекта и делов. Эту ссылку уже начинают понимать поисковики, а для пущей уверенности в индексации можно добавить альтернативный контент и нет никакой проблемы. Чтоб совсем претензий не было, можно сделать активацию flash объекта при загрузке страницы.

Но бывают ситуации, когда нужно ссылку ставить верстальщику (нет исходного flash кода, флешер в отпуске и т.п.). Неискушенный кодер может предложить элементарное решение:

<a href="">
<object data="images/flash/test.swf" type="application/x-shockwave-flash" height="300" width="200">
<param value="true" name="menu"/>
<param value="high" name="quality"/>
<param value="opaque" name="wmode"/>
</object>
</a>

Вот только у этого подхода есть недостаток — ссылка будет работать не во всех браузерах (например в Opera).

Решение 1 — перекрыть flash ссылкой

Перекрываем ссылкой flash

Для этого можно воспользоваться конструкцией:

<div class="container">
<a href="">xiper</a><!-- текст в ссылке для семантики -->
<object data="images/flash/test.swf" type="application/x-shockwave-flash" height="300" width="200">
<param value="true" name="menu"/>
<param value="high" name="quality"/>
<param value="opaque" name="wmode"/><!-- параметр чтоб можно было перекрыть flash -->
</object>
</div>

CSS:

.container {
width:200px; /* задаем размеры блока контейнера по размеру flash объекта */
height:300px;
position: relative; /* относительное позиционирование, чтобы можно было поместить внутри контейнера 2 объекта один поверх другого */
}
.container a {
display: block; /* ссылку делаем блоком, чтобы можно было ей задать размеры */
width: 100%; /* занимает всю область контейнера */
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2; /* явно указываем z-слой */
background: url(); /* чтобы ссылка работала, нужно указать ей фон (цвет или рисунок). Цвет закрасит банер, использует прозрачный однопиксельный gif или как в коде — трюк с не указанным рисунком */
text-indent: -9999px; /* прячем текст в ссылке для семантики */
overflow: hidden;
}
.container object {
position: relative; /* чтобы можно было указать z-слой */
z-index: 1; /* задаем z-слой меньше, чем у ссылки */
}

Результат. При такой конструкции не приходиться прибегать к методу динамической вставки flash для его активации. Но у данной конструкции есть недостатки:

  • не работает управление активным содержимым (не можем вызвать контекстное меню, т.к. ссылка поверх), что при динамических роликах не допустимо
  • требуется два дополнительных элемента (блок-контейнер и ссылка)
  • обязательное добавление параметра wmode, что может привести к некторым багам во flash

Решение 2 — javascript

Используем следующий код:

<html>
<head>
<title></title>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
<!-- if (swfobject.hasFlashPlayerVersion("6.0.0")) {
var fn = function() {
var att = { data:"images/test.swf", width:"200", height:"300", onmousedown:"test(event)"};<!-- добавляем обработчик события -->
var par = {
menu:"true",
quality:"high",
};
var id = "replaceMe";
var myObject = swfobject.createSWF(att, par, id);
};
swfobject.addDomLoadEvent(fn);
}

function test(event) <!-- фукция-обработчик события клика по flash-объекту-->
{
if(event.button==0 || (navigator.userAgent.indexOf("MSIE")!=-1 && event.button==1))
{
window.location="";<!-- указываем URL ссылки-->
return true;
}
}
-->
</script>
</head>
<body>
<div id="replaceMe">
<a href=""Текст для поисковых роботов" /></a>
<a href="" title="Перейти на сайт adobe для установки свежей версии flash">Установить свежую версию Flash</a>
</div>
</body>
</html>

Суть метода:

  1. используем метод динамической вставки flash для его активации при помощи модуля swfobject
  2. тегу <object> добавляем обработчик события onmousedown, который будет отслеживать клик мыши по flash и вызывать функцию transitionURL (замечу, что onclick не сработает)
  3. фукция transitionURL определяет какая кнопка мыши нажата, если нажата левая, выполняем переход по ссылке. На другие кнопки мыши не реагируем, оставляя работоспособным контекстное меню flash
  4. замечу, что во всех браузерах значение левой кнопки мыши равно 0, в IE же равно 1. Это учли в условии функции.

Демонстрация. Недостаток — пользователь с отключенным javascript увидит только альтернативное содержимое.