Запомнить меня
Зарегистрироваться | Забыли пароль | Не пришло письмо с активацией?


Для начинающих

bottom

Уроки

bottom

Полезное

bottom

Файлы

bottom

Видеокурс

Практический обучающий видео-курс "Основы C#"
От профессионального разработчика для начинающих и опытных программистов! videoCurs
bottom

Ссылки

bottom

Главная страница » Уроки по Flash

Объемное флеш облако для сайта

Просмотр демо Скачать файлы

Лазая по просторам интернета Вы, наверное, не раз натыкались на красивое крутящееся облако тегов. Это облако есть дополнение к популярному движку WordPress или какому-нибудь другому движку. Там все просто скачивается это дополнение, делается пару кликов мышкой и все готово. Но как быть, если сайт написан в ручную? В этом уроке я и расскажу, как это сделать.

Пример

Для этого нам понадобится файл «облака» tagcloud.swf и javascript файл swfobject.js. Конечно же, их нужно скачать и загрузить на сайт. Теперь подключим swfobject.js и допишем небольшой фрагмент код для вставки нашего облака тегов:

<script type="text/javascript" src="swfobject.js"></script>
<script
type="text/javascript">
    function  myTags(mytags){
       mytags=mytags.replace(/<A/g, '<a')
       .replace(/\/A>/g, "/a>")
       .replace(/(target=_)(\w*)/g, 'target="_$2"')
       .replace(/(class=)(?!")(\w*)/g, 'class="$2"')
       .replace(/(name=)(?!")(\w*)/g, 'name="$2"')
       .replace(/(id=)(?!")(\w*)/g, 'id="$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",
       bgcolor:'#ffffff'
       };
    var attributes = {
       id:"flash_cloud"
       };
    swfobject.embedSWF("tagcloud.swf?r="+rnumber,"tags", "300", "240", "9.0.0",    "expressInstall.swf", flashvars, params, attributes);
        }
    window.onload=function(){
var mytags="<tags>"
+document.getElementById('tags').innerHTML
+"</tags>";
myTags(mytags);
};
</script>

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

tcolor – цвет ссылок в облаке
hicolor -  цвет ссылок при наведении
tspeed – скорость вращения облака
distr – распределяет все теги равномерно по облаку (false – не равномерно)

В строке swfobject.embedSWF нужно указать путь до swf файла и задать его ширину и высоту.

Теперь нужно создать сами ссылки, которые будут отображаться. Здесь я не буду рассказывать о том, как их генерировать и в примере пропишем их статическими (то есть в ручную). Все они должны находится в блоке div с идентификатором tags, который также должен быть указан в нашем javascript-е (+document.getElementById('tags').innerHTML+).

<div id="tags">
<a
href="lesson.php?cat=html" style="font-size:11px;">HTML</a>
<a
href="lesson.php?cat=php" style="font-size:11px;">PHP</a>
<a
href="lesson.php?cat=swf" style="font-size:11px;">Flash</a>
<a
href="lesson.php?cat=ajax" style="font-size:11px;">Ajax</a>
<a
href="lesson.php?cat=ocss" style="font-size:11px;">CSS</a>
<a
href="lesson.php?cat=js" style="font-size:11px;">JavaScript</a>
<a
href="lesson.php?cat=jq" style="font-size:11px;">Уроки по JQuery</a>
<a
href="lesson.php?cat=omysql" style="font-size:11px;">Основы MySQL</a>
<a
href="file.php?cat=template" style="font-size:11px;">Шаблоны</a>
</div>

Обязательным параметром у ссылок является размер шрифта. Так же в ссылках можно дописать параметр target="_blank" для открытия в новом окне.

Данное облако тегов корректно работает с кодировкой  windows-1251, что позволит использовать его практически на всех сайтах.

Автор: Евгений Бочкарев · Урок добавлен: 7 Сентября 2010 в 21:01 · Просмотров: 3770

  • Currently 2.17/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 2.2/5 (всего 41 голоса)

freeCurs
Практический бесплатный мастер-класс
"Как писать программы любой сложности на языке C# под платформу .NET?"
Понравился сайт? Внесите свой вклад в его развитие?
R314489888859
41001346159934




   Комментарии к уроку (8)

12
Рамиль    Добавлено: 11-09-2010 в 09:57
Ууу спасибо! ТО что надо! Покликаю по рекламе пару раз,спасибо) Евгений ставь свой сайт на окмерческие основы) на всех уроках указывай свои wm-кошельки,если человек совестный перечислит пару монет)) я бы первёЛ)
 
34
12
Рамиль    Добавлено: 11-09-2010 в 15:49
Извините за ошибочки)
 
34
12
Алекс    Добавлено: 29-01-2011 в 01:39
ух-ты, два года искал по инету облако тегов, наконец нашел, спс огромное Евгений.
 
34
12
Oks    Добавлено: 07-02-2011 в 17:14
Евгений, спасибки!!!
 
34
12
alex    Добавлено: 07-02-2011 в 18:44
Спасибо за урок. вот только статичные ссылки переходы норм, а линки типа домен.ru/cgi-bin/part.cgi?action=cat&product_id=5 все облако убивают(
 
34
12
Nikolai    Добавлено: 10-02-2011 в 11:56
Отличная статья! Спасибо !
 
34
12
Евгений    Добавлено: 16-02-2011 в 10:33
У меня не срабатывает target="_blank" Если можно - подскажите!!!!
 
34
12
Tuu    Добавлено: 23-11-2011 в 12:16
Спасибо за облако, только появилась поблема с PHP:
если писать
<div id="tags">
<?php echo'
<a href="lesson.php?cat=html" style="font-size:11px;">HTML</a>
';?>
</div>
то все хорошо,
а если
<div id="tags">
<?php $a=2; echo'
<a href="lesson.php?cat='.$a.'" style="font-size:11px;">HTML</a>
';?>
</div>
то не работает напрочь :(
Как быть?
 
34
12

   Добавить комментарий


Ваше имя:


Текст комментария:

Получать уведомления по Email могут только зарегистрированные пользователи. Регистрация
Введите цифры с картинки


 
34