Здравствуй, уважаемый друг!

Кажется, ты используешь AdBlock. Этот проект развивается и существует за счет доходов от рекламы.
Добавь, пожалуйста, нас в исключения.

Спасибо за понимание.

Создание сайтов Харьков

Flash облако тегов на обычной html странице

18 апреля 2011 в 22:12 Автор: Nikita_Sp в категории Статьи о JavaScript 48 комментариев

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

Немного поработав за компьютером, я нашел решение.

Итак, для того чтобы создать облако тегов на обычном сайте, нам необходимо всего 4 файла:
— сама флешка
— флешка, для установки flash player’a (если таковой отсутствует у пользователя)
— javascript-файл

Скачать исходники + Демо

Итак, для начала мы пропишем в нашей страничке нужные нам теги:

<div id="tags">
 <a href="http://nikita-sp.com.ua/category/о-создании-сайтов/" style="font-size:19px;">Создание сайтов</a>
 <a href="http://nikita-sp.com.ua/category/о-создании-сайтов/статьи-о-css/" style="font-size:10px;">CSS</a>
 <a href="http://nikita-sp.com.ua/category/о-создании-сайтов/статьи-о-php/" style="font-size:21px;">PHP</a>
 <a href="http://nikita-sp.com.ua/" style="font-size:10px;">JavaScript</a>
 </div>

После того, как нами были внесены необходимые теги, с нужным нам размером и ссылкой, мы должны подключить javascript:

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
 function  myTags(mytags){
 mytags=mytags.replace(/<A/g, '<a')
 .replace(/\/A>/g, "/a>")
 .replace(/(\starget=_)(\w*)/g, ' target="_$2"')
 .replace(/(\sclass=)(?!")(\w*)/g, '')
 .replace(/(\sname=)(?!")(\w*)/g, ' name="$2"')
 .replace(/(\sid=)(?!")(\w*)/g, ' id="$2"')
 .replace(/(\srel=)(?!")(\w*)/g, ' rel="$2"');
 mytags=encodeURIComponent(mytags).replace(/!/g, '%21')
 .replace(/'/g, '%27').replace(/\(/g, '%28')
 .replace(/\)/g, '%29').replace(/\*/g, '%2A');
 var rnumber = Math.floor(Math.random()*9999999);
 var flashvars = {
 tcolor:"0x2A62C8",
 tcolor2:"0x000000",
 hicolor:"0xB12AC8",
 tspeed:"110",
 distr:"true",
 mode:"tags",
 tagcloud:mytags
 };
 var params = {
 allowScriptAccess:"always",
 wmode:'transparent'
 };
 var attributes = {
 id:"flash_cloud"
 };
 swfobject.embedSWF("tagcloud.swf?r="+rnumber,
 "tags", "100%", "300", "9.0.0",
 "expressInstall.swf", flashvars,
 params, attributes);
 }

 window.onload=function(){
 var mytags="<tags>"
 +document.getElementById('tags').innerHTML
 +"</tags>";
 myTags(mytags);
 };
</script>

Вот и все. Теперь и у нас на страничке есть flash-облако тегов :).
Посмотреть демо

UPD: обзор нового скрипта в следующей статье!

Вверх!

Меню блога

Категории блога

Облако тегов