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

Кажется, ты используешь 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: обзор нового скрипта в следующей статье!

48 комментариев

  • Не вижу необходимости в размещении облака тегов на статическом сайте.
    Тк роли в идексации флеш не несет никакой, содержимое страницы видно и так сразу, а размещать теги из других страниц нет смысла, ведь у статического сайта нет поиска. Использование сторонних поисковиков — (а это облако такое умеет?) это уже костыль.

    • В начале поста сказано, что:

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

      Читай внимательней.
      Неа, как раз в индексации и дело. Посмотри, как оно работает. Посмотри исходный код страницы с Flash-облаком!
      Тем более — это была каприза заказчика. Ну а отказывать — плохо. Ну и решил к этому и пост написать, why not? Вдруг еще пригодится и мне 🙂

      • Да, прости, соглашусь, что я немного невнимательно смотрел принцип работы :3 Ну, получается некий аналог меню, если сайт статический)

        • На самом деле, я его поставил сначала в качестве украшения, а потом и в качестве меню, и все это по просьбе Клиента.
          По завершении выложу в портфолио — увидишь.

          З.Ы. Приятно, что мой блог интересен тебе и есть кому его читать. Всем читателям — спасибо. Подписываемся! По возможности выкладываю полезные штуки, которые не всегда найдете в рунете.

          • Да я так тоже думал и поставил капчу, но они рекламировали гугл! представь! Посмотри на адрес ссылки в имени бота. Дебры и Джолин.
            У остальных я убирал просто url. А сейчас вообще везде сквозняк поставил ^_^

            А чего не через ВК комменты? =)

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

    • Ничего не происходит, навреное из-за того, что ты не указал параметр href для ссылок.

      Попробуй просто изменить под себя мою демку.
      (см. конец поста)

  • блин не понимаю)
    делаю на основе вашей демки
    я создал строку
    a href=»http://www.cyberfight.ru/» style=»font-size:21px;»>PHP</a
    я чегото не сделла или что-то не так, но что не могу понять)

  • поставил ссылку на html-страницу, которая была в той же папке и на нее заработало;)
    а ставлю ссылку интернетовскую и не хочет, ну да ладно, мне ж главное навигацию по моему сайту сделать а не на другие сайты.
    Спасибо!

    • Пожалуйста, обращайтесь.
      Если будут вопросы, возможно даже пост по вашему вопросу напишу.
      Успешного коддинга!

  • спасибо, путём. а есть ли возможность реализовать облако картинок (как на юкозе или пикасе). было бы не плохо.

    • Верхний — этой html — в body
      Нижний — javascript — желательно в head, но и в body вроде тоже будет работать.
      Скачайте исходники и посмотрите что где.

  • Я все поставил, и все прекрасно работает, но флеш надо в мозиле запускать вручную, как в демке, а на Вашем сайте он запускается автоматом. Надо как у Вас. Спасибо за скрипт, полезный.

    • Пожалуйста, всегда рад помочь.
      Я, честно говоря, не очень понимаю что Вы подразумеваете под запуском вручную.
      Я зашел на сайт, где стоит такая флешка (сам ставил) через мозиллу и все отлично. Ничего не надо запускать.

  • Спасибо за быстрый ответ. Попробую объяснить, как сумею:
    Многие используют флешблок и носкрипт, но именно на Вашем сайте при разрешении скриптов облако(только облако) запускается автоматом и не надо разрешать флеш для него, остальные swfы ждут разрешения. В демке надо разрешать флеш, и у меня на сайте, после установки надо разрешать флеш. Я хочу чтоб, как на Вашем сайте. Хочу, но не могу. Вот и прошу подсказать. Спасибо.

    • Я Вас понял.
      Дело в том, что у меня на сайте стоит не такое облако тегов.
      У меня HTML облако тегов. Если Вы внимательно посмотрите на исходный код моей страницы, то увидите что облако тегов у меня обозначено следующим кодом:

      <canvas width="260" height="260" id="tagCloudh5">.....

      Таким образом, при анализе «блокировщиками» страницы они не замечают эту флешку.
      (Обычно флеш обозначается иначе 🙂

        • Извините за флуд — забыл дописать.

          Как увеличить диаметр облака?

          • swfobject.embedSWF("tagcloud.swf?r="+rnumber,
             "tags", "100%", "300", "9.0.0",
             "expressInstall.swf", flashvars,
             params, attributes);

            если не ошибаюсь — измените параметр со значением 300.

      • У меня такая же проблема, в Опере появляется большая кнопка PLAY, а нужно чтобы автоматически запускалась, т.к. это больше элемент дизайна нежели функциональный блок.

        Буду благодарен за помощь.

  • Большое спасибо. Всплыла другая, более серьезная проблема:
    в Опере. Это облако использую как поиск на сайте по тегам, очень удобно.
    Так вот, в ИЕ и FF прекрасно работает по ссылкам типа мойсайт/search/Никополь/ или мойсайт/search/Киев/ и т.д., но в опере ищет только по цифрам или латинским буквам, кирилицу не хочет. Выдает пустые квадраты вместо слова поиска. Может Вы сталкивались с этим. На Вашем сайте облако в Опере работает.
    Спасибо.

    • Проверьте кодировку. Квадраты выдает при неверной кодировке. Стоит обычно UTF-8. А Ваш файл видимо в ANSI.

    • В Опере стоит автоопределение кодировки. Второй похожий блок на флеше работает, но он мне не очень подходит. Ваш вариант практичнее.

      • С отключенным яваскриптом в Опере работает нормально, т.е. после клика по слову Киев, выдает все что связано с Киевом, а вот с явой не хочет.

        • Файл, который Вы подключаете.
          Возможно дело в js-файле. Проверьте его кодировку.

          Экспериментируйте, пробуйте. В любом случае, я не смогу наугад решить Вашу проблему, учитывая что она не одна. Мне необходимо для этого самому посмотреть, что Вы наделали :).

          Да, и просьба, не флудите, и добавляйте по одному комментарию. А не по три.

  • Извините за флуд. Кодировку файла js изменил с ANSI на UTF-8 — не помогло.

    • В таком случае я помочь не могу. Это необходимо рассматривать лично.
      Возможно где-то какая-то ошибка.

  • Жаль. Придется отказаться от использования этого скрипта. Все равно спасибо. Удачи.

  • Проблему решил топором, скрипт запустил. Для Оперы другие js и swf. Пожалуйста продублируйте отправку исходников. Ящик был неактивен, ничего не пришло. Спасибо.

  • Пипл, а подскажите: Мне нужно, чтобы это облако вертелось на площади в 1000 пикселей в длину и 200 в высоту. Тут же получается, что только если квадратно увеличивать.

    • Дело в том что облако имеет форму шара, а стереометрические особенности данной фигуры не позволяют сделать ее «вытянутой».
      Вы можете указать высоту блока 1000 пикселей и ширину 200 пикселей, и облако будет расположено в центре, и будет иметь высоту и ширину 200 пикселей.

Добавить комментарий для Nikita_Sp Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вверх!

Меню блога

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

Облако тегов