Облако тегов
Всем привет сегодня мы напишем с вами такую штуку как 3D облако тегов.
Для этого нам понадобится всего 3 вещи:
1 JS библиотека для работы с флеш;
2 Сам флеш-файл, который и будет формировать облако;
3 Руки и блокнот для написания кода.
Все, кроме третьего пункта,
есть здесь.
Первое, что мы делаем это подключаем JS библиотеку для работы с флеш:
1
2 |
<script type="text/JavaScript" src="swfobject.js"></script>
|
Далее создаем DIV в котором будет располагаться наше облако.
1
2
3 |
<div id="tags" align="center"></div>
|
(При желании можно расположить его по центру).
Потом пишем сообщение (можете написать и своё), которое выводится при выключенном Java Script или отсутствующем флеш-плеере:
“Для отображения облака должен быть установлен FlashPlayer и включен Java Script в браузере.”
Далее создаем переменную, которая будет хранить ссылки, для отображения в облаке. В нашем облаке мы будем собирать ссылки на разные поисковики:
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<?php
$tags = '<tags>
<a href="http://www.google.ru" style="font-size: 15px">Google</a>
<a href="http://www.yandex.ru" style="font-size: 15px">Яндекс</a>
<a href="http://ru.yahoo.com" style="font-size: 15px">Yahoo</a>
<a href="http://www.rambler.ru" style="font-size: 15px">Rambler</a>
<a href="http://www.amazon.com" style="font-size: 15px">Amazon</a>
<a href="http://price.ru/" style="font-size: 15px">Price</a>
<a href="http://ru.wikipedia.org/" style="font-size: 15px">Wiki</a>
<a href="http://www.icq.com/" style="font-size: 15px">ICQ</a>
</tags>';
|
нужен для того, чтобы флеш знал какие ссылки выводить в облаке, при желании можно заменить эти теги на другие не существующие в HTML.
(Без этих тегов облако не будет отображаться !)
Если пути на страницы хранятся в базе данных, то можно сформировать массив примерно так:
1
2
3
4
5
6
7
8
9
10
11
12
13 |
<?php
$res = mysql_query("SELECT `url`, `link` FROM `links`"); //Даём запрос на выборку линков
$tags = Array();
while($links = mysql_fetch_assoc($res))
{
$tags[] = '<a fref="'. $links['url'] .'">'. $links['link'] .'</a>';
}
$tags = implode(',', $tags); //Соединяем массив
$tags = '<tags>'. $tags ."</tags>"; //Обрамляем тегами <tags>
|
Последнее и самое главное, что здесь есть, это сердце облака:
1
2
3
4
5
6
7
8
9
10
11 |
<script type="text/javascript">
var rand = Math.random()*9999;
var tag = new SWFObject("tagcloud.swf?r="+rand, "tagcloudflash", "250", "150", "10", "#ffffff");
tag.addVariable("tcolor", "0x19b509");
tag.addVariable("tspeed", "150");
tag.addVariable("distr", "true");
tag.addVariable("mode", "tags");
tag.addVariable("tagcloud", "<?php echo urlencode($tags); ?>");
tag.write("tags");
</script>
|
var rand = Math.random()*9999; – создаем переменную в которой генерируется случайное число для выбора ссылок в переменной.
var tag = new SWFObject("tagcloud.swf?r="+rand, "tagcloudflash", "250", "150", "10", "#ffffff"); – создаем объект которому передаем параметры:
250 – ширина
150 – высота
10 – версия флеш-плеера, но не выше чем установлен у вас.
#ffffff – цвет фона облака.
tag.addVariable("tcolor", "0x19b509"); – Указываем цвет текста в облаке. (В нашем случае это зеленый).
tag.addVariable("tspeed", "150"); – Скорость вращения облака.
tag.addVariable("distr", "true"); – если установить значение в FALSE облако примет иной вид и ссылки будут наплывать друг на друга.
tag.addVariable("tagcloud", ""); – кодируем сформированные в переменной ссылки.
tag.write("tags"); – Указываем идентификатор DIV’а в котором будет формироваться облако.
Чтобы было удобнее настраивать внешний вид, можно настройки
вынести в конфигурационный файл:
1
2
3
4
5
6
7
8
9
10
11
12
13 |
<?php
define ("IRB_WIDTH", 200); //Ширина облака
define ("IRB_HEIGHT", 150); //Высота
define ("IRB_VERSION_FLASH", 7); //Версия FLASH-плеера
define ("IRB_BACKGROUND", "#ffffff"); //Фон облака
define ("IRB_T_COLOR", "0x19b509"); //Цвет тектса
define ("IRB_T_SPEED", "200"); //Скорость вращения
define ("IRB_DISTR", "true"); //Вид облака, если FALSE, облако примет иной вид
define ("IRB_MODE", "tags"); //
define ("IRB_TAGS", "tags"); //ID DIV'а
|
И изменить немного скрипт:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<script type="text/javascript">
var rand = Math.floor(Math.random()*9999);
var tag = new SWFObject(
"tagcloud.swf?r="+rand,
"tagcloudflash",
"<?php echo IRB_WIDTH ?>",
"<?php echo IRB_HEIGHT ?>",
"<?php echo IRB_VERSION_FLASH ?>",
"<?php echo IRB_BACKGROUND ?>"
);
tag.addVariable("tcolor", "<?php echo IRB_T_COLOR ?>");
tag.addVariable("tspeed", "<?php echo IRB_T_SPEED ?>");
tag.addVariable("distr", "<?php echo IRB_DISTR ?>");
tag.addVariable("mode", "<?php echo IRB_MODE ?>");
tag.addVariable("tagcloud", "<?php echo urlencode($tags); ?>");
tag.write("<?php echo IRB_TAGS ?>");
</script>
|
В результате у нас получился такой вот код
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<script type="text/javascript" src="/cloud/swfobject.js"></script>
<?php
$tags = '<tags>
<a href="http://www.google.ru" style="font-size: 15px">Google</a>
<a href="http://www.yandex.ru" style="font-size: 15px">Яндекс</a>
<a href="http://ru.yahoo.com" style="font-size: 15px">Yahoo</a>
<a href="http://www.rambler.ru" style="font-size: 15px">Rambler</a>
<a href="http://www.amazon.com" style="font-size: 15px">Amazon</a>
<a href="http://price.ru/" style="font-size: 15px">Price</a>
<a href="http://ru.wikipedia.org/" style="font-size: 15px">Wiki</a>
<a href="http://www.icq.com/" style="font-size: 15px">ICQ</a>
</tags>';
?>
<div id="tags" align="center">
Для корректного отображения этого элемента вам необходимо установить FlashPlayer и включить в браузере Java Script.
<script type="text/javascript">
var rand = Math.floor(Math.random()*9999999);
var tag = new SWFObject(
"/cloud/tagcloud.swf?r="+rand,
"tagcloudflash",
"<?php echo IRB_WIDTH ?>",
"<?php echo IRB_HEIGHT ?>",
"<?php echo IRB_VERSION_FLASH ?>",
"<?php echo IRB_BACKGROUND ?>"
);
tag.addVariable("tcolor", "<?php echo IRB_T_COLOR ?>");
tag.addVariable("tspeed", "<?php echo IRB_T_SPEED ?>");
tag.addVariable("distr", "<?php echo IRB_DISTR ?>");
tag.addVariable("mode", "<?php echo IRB_MODE ?>");
tag.addVariable("tagcloud", "<?php echo urlencode($tags); ?>");
tag.write("<?php echo IRB_TAGS ?>");
</script>
</div>
|
который можно вставить в любое место страницы, и там появится наше облачко. Правда предварительно нужно создать в корне папку
could и положить в неё скрипт
swfobject.js и сам флэш-ролик.
Впрочем
тут можно взять готовый.
Артём aka Winston по мотивам этого блога
