Сен 03

Переход по гиперссылке при клике на флеш-баннер. Улучшенное решение!

Я уже касался этой темы в посте 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-файл с прозрачностью.

Июн 09

Скрипт для ротации баннеров

Решил сделать на своем сайте ротацию баннеров от различных партнерских программ. Сайт самописный и различные готовые решения, которые есть, например, для WordPress не подходят (кстати, в WordPress для этих же целей я использую плагин AdRotate, весьма удобный).

Поскольку простейшая ротация баннеров не требует слонжого программирования, то на создание скрипта и его тестирование отладку ушло ~20 минут.
Код баннерного ротатора выглядит следующим образом.

<? 
function rotator($filename)
 {
   if (file_exists($filename)) // проверяем наличие файла
    {
      $s=file_get_contents($filename); // читаем файл в строку
      $n = explode("###", $s);	// разделяем строку на отдельные баннеры
      $r = rand(0,count($n)-1); // выбираем случайное число (по кол-ву баннеров)
      echo $n[$r]; // выводим код баннера в поток вывода
     }
 }
?>

Для удобства использования ротатор реализован в виде функции, параметром которой является имя файла с HTML-кодом рекламных объявлений.
Файл с рекламными объявлениями выглядит следующим образом.

<a href="http://codething.ru/">Уголок веб-разработчика</a>
###
<a href="http://blog.codething.ru/">Блог веб-разработчика</a>
###
<a href="http://forum.codething.ru/">Форум о веб-разработке</a>

В качестве разделителя используется последовательность ###.

Вызов показа баннеров выполняется в коде следующим образом

<?php
 include ("rotator.php");
 rotator("file"); // запускаем с именем файла, в котором код баннеров
?>

Задача ротации баннеров решена.

Фев 21

Делаем гиперссылку при клике на флеш-баннер

Поначалу кажется странным, но проблема создания гиперссылки из флеш-объекта существует очень давно. Обычным тегом <A> никак нельзя создать гиперссылку с флеш-объекта. Не помогает и более хитрый вариант с <DIV onClick='location.href=""'>, потому что у флеш своя собственная активная зона на экране, где могут обрабатываться какие-то события, связанные с мышкой.

Как обойти эту проблему? Большинство людей советуют встроить ссылку в сам Flash-файл. Делается это очень просто - прямо в Adobe Flash - создается прозрачный слой-кнопка, которой прописывается обработчик события onRelease().

button.onRelease = function() {
getURL("http://www.codething.ru/");
};

Этот способ хорош лишь в том случае, если вы самостоятельно изготавливаете и Flash-ролик и сайт.

Если же вам приносят множество готовых флеш-роликов (чаще всего это баннеры), в которых ссылка явно не задана, то следует применять другой, более экзотический способ создания гиперссылки. Например, можно воспользоваться javascript библиотекой jQuery и её расширением jQuery SWFObject plugin.

Для этого выполним следующие действия:

1. Качаем jQuery с сайта http://jquery.com/
2. Качаем плагин jQuery SWFObject plugin с сайта http://jquery.thewikies.com/swfobject/ (заодно читаем там документацию и смотрим примеры).
3. Размещаем на странице нехитрый код:

<a href="http://www.codething.ru/">
 <div id="myflash"></div>
</a>
<script>
$(document).ready(
 function() {
  $('#myflash').flash(
  {
   swf: '/images/banner.swf',
   width: '120px',
   height: '120px'
  });
 }
);
</script>

4. Радуемся результату!