Как создать облако тегов? Вариант №1.

Информация, представленная в этой статье ориентирована в первую очередь для начинающих web-мастеров.

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

Для размещения облака тегов на странице сайта необходимо выполнить несколько простых шагов.

После скачивания архива, распакуйте его в текущую папку на компьютере. В папке oblakotegov1 находится папка tagcloud и демонстрационный файл demo.html, открыв который в вашем браузере, проверьте отображение облака.

Закачайте папку tagcloud на сервер сайта и пропишите пути к файлам swfobject.js и tagcloud.swf в коде облака.

Код, который Вы видите внизу, нужно вставить в раздел body страницы вашего сайта, в то место, где планируется расположение облака:

<div align="center">
<script type="text/javascript" src="tagcloud/swfobject.js"></script>
  <div id="cloud_block" style="text-align:center;font-size:12pt;">
    Для отображения блока требуется <a href="//get.adobe.com/flashplayer/?loc=ru" target="_blank" title="Скачать Flash Player 10 бесплатно">Flash Player 10</a><br><br>
  </div>
  <script type="text/javascript">
    var rnumber = Math.floor(Math.random()*9999999);
    var so = new SWFObject("tagcloud/tagcloud.swf?r="+rnumber, "tagcloudflash", "500", "350", "9");
    so.addParam("wmode", "transparent"); 
    so.addParam("allowScriptAccess", "always"); 
    so.addParam("bgcolor", "#FF0000"); 
    so.addVariable("tspeed", "100"); 
    so.addVariable("distr", "true"); 
    so.addVariable("mode", "tags"); 
    so.addVariable("minFontSize", "1"); 
    so.addVariable("maxFontSize", "2"); 
    so.addVariable("tcolor", "0x008B8B"); 
    so.addVariable("tcolor2", "0x009CFF"); 
    so.addVariable("hicolor", "0xDC143C");
    so.addVariable("tagcloud", "<tags><a href='Ссылка' style='font-size:18pt;'>Название ссылки</a><a href='Ссылка' style='font-size:18pt;'>Название ссылки</a><a href='Ссылка' style='font-size:18pt;'>Название ссылки</a><a href='Ссылка' style='font-size:18pt;'>Название ссылки</a><a href='Ссылка' style='font-size:18pt;'>Название ссылки</a><a href='Ссылка' style='font-size:18pt;'>Название ссылки</a><a href='Ссылка' style='font-size:18pt;'>Название ссылки</a><a href='Ссылка' style='font-size:18pt;'>Название ссылки</a><a href='Ссылка' style='font-size:18pt;'>Название ссылки</a><a href='Ссылка' style='font-size:18pt;'>Название ссылки</a></tags>");
    so.write("cloud_block");
  </script>
</div>

Настройки

1. Скопированный и вставленный код должен оставаться в таком виде, как он представлен в таблице вверху. Особенно, это касается ссылок - они должны идти одна за другой (цугом или паровозом с вагонами), иначе удачи не видать;
2. Проставьте свои названия и адреса ссылок - в противном случае они будут некликабельны. Если облако будет отображаться некорректно, а именно, в каракулях, смените кодировку на соответствующую кодировке вашего сайта;
3. tagcloud/swfobject.js - путь к файлу swfobject.js (можно писать полный путь, например, "https://www.вашсайт.ru/tagcloud/swfobject.js");
4. tagcloud/tagcloud.swf - путь к файлу tagcloud.swf;
5. 500x350 - это размеры облака (величина поля),    9 - минимально допустимая версия Adobe Flash Player;
6. "wmode", "transparent" - фон облака будет прозрачным. Если убрать эту строку - можно будет самостоятельно задавать цвет фона "bgcolor";
7. "tspeed", "100" - скорость вращения (большую скорость выставлять не рекомендуется, иначе посетители сайта не «поймают» ваши ссылки);
8. "distr", "true" - тип вращения облака, может принимать значение "true" или "false";
9. "minFontSize", "1" - размер самого малого шрифта в пунктах;
10. "maxFontSize", "2" - размер самого крупного шрифта в пунктах;
11. "tcolor", "0x008B8B" - цвет самого частого текста в облаке тегов в RGB формате. Частота текста определяется по свойству ссылки style. 0x не трогать;
12. "tcolor2", "0x009CFF" - цвет самого редкого текста в облаке тегов в RGB формате. Частота текста определяется по свойству ссылки style. 0x не меняем;
13. "hicolor", "0xDC143C" - цвет текста при наведении на него курсора мыши. 0x не меняем;
14. <a href='Ссылка' style='font-size:18pt;'>Название ссылки</a> - код ссылки, где нужно проставить название и адрес. Ссылок может быть столько, сколько Вам необходимо.

Как видите, ничего сложного. На этом всё. Пока. Л.М.