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

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

Внешне практически ничем не отличается от первого варианта. Отличия наблюдаются только в коде.

Вариант удаленного подключения с сайта //neotech.3dn.ru

Скопируйте и вставьте данный код в раздел body в то место, где будет располагаться «облако»:

<div id="yoblako" align="center"><noindex>
    
    <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
    <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
    <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
    <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
    <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
    <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
    <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
    <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
    <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
    <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
    <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
    <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
    <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
    <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
    <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
    <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
    
    </noindex></div>


<script type="text/javascript" src="//neotech.3dn.ru/Tegs/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.mode = 'tags';
flashvars.minFontSize = '8';  /* минимальный размер  шрифта в облаке. Размер задается в пунктах.*/
flashvars.maxFontSize = '12';  /* максимальный размер  шрифта в облаке. Размер задается в пунктах.*/
flashvars.tcolor = '0x006600';  /* "0x006600" - цвет самого частого текста в облаке тегов в RGB формате. Частота текста определяется по свойству ссылки style. 0x не меняем. */
flashvars.tcolor2 = '0x006600'; /* "0x006600" - цвет самого редкого текста в облаке тегов в RGB формате. Частота текста определяется по свойству ссылки style. 0x не меняем. */
flashvars.hicolor = '0xFF0000';   /* "0xFF0000" - цвет текста при наведении на него курсора. 0x не меняем. */
flashvars.distr = 'true';   /* тип вращения облака, может принимать значение "true" или "false" */
flashvars.tspeed = '100'; /* скорость вращения */
eTagz = document.getElementById('yoblako').getElementsByTagName('A');
flashvars.tagcloud = '<tags>';
for (var i=0; eTagz[i]; ++i) flashvars.tagcloud += '<a href=\'' + eTagz[i].getAttribute('href')
+ '\' style=\'' + parseInt(eTagz[i].style.fontSize)
+ '\'>' + eTagz[i].innerHTML.replace(/&/i, '%26') + '</a>';
delete eTagz;
flashvars.tagcloud += '</tags>';
var params = {};
/* params.wmode = 'transparent';  устанавливаем фон облака прозрачным. Если убрать эту строку, то можно будет самим задавать цвет фона. */
params.bgcolor = '#FFFFCC';
params.allowscriptaccess = 'always';
var attributes = {};
attributes.id = 'yoblako';
attributes.name = 'tagcloud';
swfobject.embedSWF('//neotech.3dn.ru/Tegs/tagcloud.swf', 'yoblako', '700', '450', '9.0.0', false, flashvars, params, attributes);          /* "700" - ширина будущего облака тегов в пикселях.
                        "450" - высота будущего облака тегов.
                         "9" - максимальная версия флеш-плеера, которая нужна для отображения облака. */
</script>

Вариант локального подключения вспомогательных файлов

Если не работает вариант удаленного подключения, скачайте исходный материал с локальным подключением файлов swfobject.js и tagcloud.swf.

Проставьте адреса и названия ссылок. При необходимости, произведите некоторые настройки.

Спасибо за внимание. Надеюсь, урок был Вам полезен. До встречи на следующих уроках. Л.М.