Flash облако тегов на обычной html странице
18 апреля 2011 в 22:12 в категории Статьи о 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 комментариев
Не вижу необходимости в размещении облака тегов на статическом сайте.
Тк роли в идексации флеш не несет никакой, содержимое страницы видно и так сразу, а размещать теги из других страниц нет смысла, ведь у статического сайта нет поиска. Использование сторонних поисковиков — (а это облако такое умеет?) это уже костыль.
В начале поста сказано, что:
Читай внимательней.
Неа, как раз в индексации и дело. Посмотри, как оно работает. Посмотри исходный код страницы с Flash-облаком!
Тем более — это была каприза заказчика. Ну а отказывать — плохо. Ну и решил к этому и пост написать, why not? Вдруг еще пригодится и мне 🙂
Да, прости, соглашусь, что я немного невнимательно смотрел принцип работы :3 Ну, получается некий аналог меню, если сайт статический)
На самом деле, я его поставил сначала в качестве украшения, а потом и в качестве меню, и все это по просьбе Клиента.
По завершении выложу в портфолио — увидишь.
З.Ы. Приятно, что мой блог интересен тебе и есть кому его читать. Всем читателям — спасибо. Подписываемся! По возможности выкладываю полезные штуки, которые не всегда найдете в рунете.
That’s the best aneswr of all time! JMHO
Im not whorty to be in the same forum. ROTFL
I’m not eailsy impressed. . . but that’s impressing me! 🙂
Haha. I woke up down today. Youve ceeehrd me up!
Thanks for support.
Видишь, Влад, ты даже иностранца насмешил 🙂
Спам-боты пасутся, штоле
Да я так тоже думал и поставил капчу, но они рекламировали гугл! представь! Посмотри на адрес ссылки в имени бота. Дебры и Джолин.
У остальных я убирал просто url. А сейчас вообще везде сквозняк поставил ^_^
А чего не через ВК комменты? =)
With the bases loaded you struck us out with that aenswr!
Привет, в общем я только начал в этом разбираться еще не совсем понимаю(
Вот я вроде скопировал коды вставил флешку «тагклоуд.свф, облако появилось на моей страничке(ну пока еще на компе только), научился добавлять новые слова в облако тегов, но возникла проблема, облако крутится, слова выделяются в рамочку при наведении, но после щелчка по ним ничего не просиходит, хотя я вроде как и указал ссылку.
Ничего не происходит, навреное из-за того, что ты не указал параметр href для ссылок.
Попробуй просто изменить под себя мою демку.
(см. конец поста)
блин не понимаю)
делаю на основе вашей демки
я создал строку
a href=»http://www.cyberfight.ru/» style=»font-size:21px;»>PHP</a
я чегото не сделла или что-то не так, но что не могу понять)
Строка для одного тега-ссылки должна иметь вид:
<a href=’адрес_вашего_урл’ font-size=’желаемый_размер(X px)’>Текст тега-ссылки</a>
Вы мне можете на мыло выслать свой исходник (только html файл).
http://nikita-sp.com.ua/author/nikita_sp/
на этой старнице найдешь мой е-маил (не хочу его публиковать особо, чтобы не было спама.)
поставил ссылку на html-страницу, которая была в той же папке и на нее заработало;)
а ставлю ссылку интернетовскую и не хочет, ну да ладно, мне ж главное навигацию по моему сайту сделать а не на другие сайты.
Спасибо!
Пожалуйста, обращайтесь.
Если будут вопросы, возможно даже пост по вашему вопросу напишу.
Успешного коддинга!
спасибо, путём. а есть ли возможность реализовать облако картинок (как на юкозе или пикасе). было бы не плохо.
Спасибо за комментарий, я ответил на Ваш вопрос постом.
Прошу любить и жаловать.
http://nikita-sp.com.ua/2011/05/flash-oblako-izobrazheniy-na-obyichnoy-html-stranitse.html
а куда вставлять верхний код?простите за мою тупость!
Верхний — этой html — в body
Нижний — javascript — желательно в head, но и в body вроде тоже будет работать.
Скачайте исходники и посмотрите что где.
Пожалуйста, подскажите, как Вы сделали автозапуск флеша?
Я все поставил, и все прекрасно работает, но флеш надо в мозиле запускать вручную, как в демке, а на Вашем сайте он запускается автоматом. Надо как у Вас. Спасибо за скрипт, полезный.
Пожалуйста, всегда рад помочь.
Я, честно говоря, не очень понимаю что Вы подразумеваете под запуском вручную.
Я зашел на сайт, где стоит такая флешка (сам ставил) через мозиллу и все отлично. Ничего не надо запускать.
Спасибо за быстрый ответ. Попробую объяснить, как сумею:
Многие используют флешблок и носкрипт, но именно на Вашем сайте при разрешении скриптов облако(только облако) запускается автоматом и не надо разрешать флеш для него, остальные swfы ждут разрешения. В демке надо разрешать флеш, и у меня на сайте, после установки надо разрешать флеш. Я хочу чтоб, как на Вашем сайте. Хочу, но не могу. Вот и прошу подсказать. Спасибо.
Я Вас понял.
Дело в том, что у меня на сайте стоит не такое облако тегов.
У меня HTML облако тегов. Если Вы внимательно посмотрите на исходный код моей страницы, то увидите что облако тегов у меня обозначено следующим кодом:
Таким образом, при анализе «блокировщиками» страницы они не замечают эту флешку.
(Обычно флеш обозначается иначе 🙂
Исходники не пришли. Пожалуйста, повторите отправку. Спасибо.
Извините за флуд — забыл дописать.
Как увеличить диаметр облака?
если не ошибаюсь — измените параметр со значением 300.
У меня такая же проблема, в Опере появляется большая кнопка PLAY, а нужно чтобы автоматически запускалась, т.к. это больше элемент дизайна нежели функциональный блок.
Буду благодарен за помощь.
Читайте переписку с Сергеем.
Больше пока ничем помочь не могу — занят.
Большое спасибо. Всплыла другая, более серьезная проблема:
в Опере. Это облако использую как поиск на сайте по тегам, очень удобно.
Так вот, в ИЕ и FF прекрасно работает по ссылкам типа мойсайт/search/Никополь/ или мойсайт/search/Киев/ и т.д., но в опере ищет только по цифрам или латинским буквам, кирилицу не хочет. Выдает пустые квадраты вместо слова поиска. Может Вы сталкивались с этим. На Вашем сайте облако в Опере работает.
Спасибо.
Проверьте кодировку. Квадраты выдает при неверной кодировке. Стоит обычно UTF-8. А Ваш файл видимо в ANSI.
Пожалуйста, уточните, какой именно файл. Сайт у меня на UTF-8.
В Опере стоит автоопределение кодировки. Второй похожий блок на флеше работает, но он мне не очень подходит. Ваш вариант практичнее.
С отключенным яваскриптом в Опере работает нормально, т.е. после клика по слову Киев, выдает все что связано с Киевом, а вот с явой не хочет.
Файл, который Вы подключаете.
Возможно дело в js-файле. Проверьте его кодировку.
Экспериментируйте, пробуйте. В любом случае, я не смогу наугад решить Вашу проблему, учитывая что она не одна. Мне необходимо для этого самому посмотреть, что Вы наделали :).
Да, и просьба, не флудите, и добавляйте по одному комментарию. А не по три.
Извините за флуд. Кодировку файла js изменил с ANSI на UTF-8 — не помогло.
В таком случае я помочь не могу. Это необходимо рассматривать лично.
Возможно где-то какая-то ошибка.
Жаль. Придется отказаться от использования этого скрипта. Все равно спасибо. Удачи.
Не за что.
Взаимно!
Проблему решил топором, скрипт запустил. Для Оперы другие js и swf. Пожалуйста продублируйте отправку исходников. Ящик был неактивен, ничего не пришло. Спасибо.
Сделал
Пипл, а подскажите: Мне нужно, чтобы это облако вертелось на площади в 1000 пикселей в длину и 200 в высоту. Тут же получается, что только если квадратно увеличивать.
Дело в том что облако имеет форму шара, а стереометрические особенности данной фигуры не позволяют сделать ее «вытянутой».
Вы можете указать высоту блока 1000 пикселей и ширину 200 пикселей, и облако будет расположено в центре, и будет иметь высоту и ширину 200 пикселей.
Также не рекомендую использовать Flash технологию, т.к. она уже не используется и от нее отказываются. Вы можете попробовать реализовать такое облако при помощи следующей статьи:
http://nikita-sp.com.ua/2012/05/oblako-tegov-na-html5-pri-pomoschi-tagcanvas.html