Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по 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 Просмотров: 18636

Условия копирования материалов сайта

Все комментарии

Посмотреть предыдущие комментарии (2)

#3 Алекс 29-01-2011 в 01:39
ух-ты, два года искал по инету облако тегов, наконец нашел, спс огромное Евгений.
#4 Oks 07-02-2011 в 17:14
Евгений, спасибки!!!
#5 alex 07-02-2011 в 18:44
Спасибо за урок. вот только статичные ссылки переходы норм, а линки типа домен.ru/cgi-bin/part.cgi?action=cat&product_id=5 все облако убивают(
#6 Nikolai 10-02-2011 в 11:56
Отличная статья! Спасибо !
#7 Евгений 16-02-2011 в 10:33
У меня не срабатывает target="_blank" Если можно - подскажите!!!!
#8 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>
то не работает напрочь :(
Как быть?
#9 Дмитрий 12-04-2012 в 21:47
Хороший скрипт! Спасибо!
#10 Text 19-09-2014 в 06:19
спасибо. то что надо..
попробую настроить для себя на HTML)
#11 Тиховский Павел 22-10-2014 в 03:51
У меня тоже глючит при использовании php со ссылками типа:

"<a href='service_tag_view.php?viewid=".$ttx1."' target='_self' style='font-size:10px;'>".$ttx2."</a>"


Этот говнокод неисправим


======================
Делайте так:
<head>
<script type="text/javascript" src="swfobject.js"></script>
</head>


<body>
<div id='tags' align='center'>
<?php
$db = mysql_connect ("localhost","root","******");
mysql_select_db("base",$db);
$result = mysql_query("SELECT * FROM service_tags ORDER BY id",$db);
$myrow = mysql_fetch_array($result);
$ttx = "";

do {
$ttx1 = $myrow['id'];
$ttx2 = $myrow['description_small'];
$ttx3 = "<a href='service_tag_view.php?viewid=".$ttx1."' target='_self' style='font-size:10px;'>".$ttx2."</a>";
$ttx = "".$ttx."".$ttx3;
}
while ($myrow = mysql_fetch_array($result));

$tags ="<tags>".$ttx."</tags>";
echo $tags;
?>
<script type="text/javascript">
var rnumber = Math.floor(Math.random()*9999999);
var widget_so = new SWFObject("tagcloud.swf?r="+rnumber, "tagcloudflash", "250", "190", "9");
widget_so.addParam("allowScriptAccess", "always");
widget_so.addParam("wmode","transparent");
widget_so.addVariable("tcolor", "0x000000");
widget_so.addVariable("hicolor", "0x0000ff");
widget_so.addVariable("tspeed", "115");
widget_so.addVariable("distr", "true");
widget_so.addVariable("mode", "tags");
widget_so.addVariable("tagcloud", "<?php echo urlencode($tags); ?>");
widget_so.write("tags");

</script>
</div>
</body>



swfobject.js --->


/**
* SWFObject v1.4: Flash Player detection and embed - http://blog.deconcept.com/swfobject/
*
* SWFObject is (c) 2006 Geoff Stearns and is released under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
* **SWFObject is the SWF embed script formarly known as FlashObject. The name was changed for
* legal reasons.
*/
if(typeof deconcept=="undefined"){var deconcept=new Object();}
if(typeof deconcept.util=="undefined"){deconcept.util=new Object();}
if(typeof deconcept.SWFObjectUtil=="undefined"){deconcept.SWFObjectUtil=new Object();}
deconcept.SWFObject=function(_1,id,w,h,_5,c,_7,_8,_9,_a,_b){
if(!document.createElement||!document.getElementById){return;}
this.DETECT_KEY=_b?_b:"detectflash";
this.skipDetect=deconcept.util.getRequestParameter(this.DETECT_KEY);
this.params=new Object();
this.variables=new Object();
this.attributes=new Array();
if(_1){this.setAttribute("swf",_1);}
if(id){this.setAttribute("id",id);}
if(w){this.setAttribute("width",w);}
if(h){this.setAttribute("height",h);}
if(_5){this.setAttribute("version",new deconcept.PlayerVersion(_5.toString().split(".")));}
this.installedVer=deconcept.SWFObjectUtil.getPlayerVersion(this.getAttribute("version"),_7);
if(c){this.addParam("bgcolor",c);}
var q=_8?_8:"high";
this.addParam("quality",q);
this.setAttribute("useExpressInstall",_7);
this.setAttribute("doExpressInstall",false);
var _d=(_9)?_9:window.location;
this.setAttribute("xiRedirectUrl",_d);
this.setAttribute("redirectUrl","");
if(_a){this.setAttribute("redirectUrl",_a);}};
deconcept.SWFObject.prototype={setAttribute:function(_e,_f){
this.attributes[_e]=_f;
},getAttribute:function(_10){
return this.attributes[_10];
},addParam:function(_11,_12){
this.params[_11]=_12;
},getParams:function(){
return this.params;
},addVariable:function(_13,_14){
this.variables[_13]=_14;
},getVariable:function(_15){
return this.variables[_15];
},getVariables:function(){
return this.variables;
},getVariablePairs:function(){
var _16=new Array();
var key;
var _18=this.getVariables();
for(key in _18){
_16.push(key+"="+_18[key]);}
return _16;
},getSWFHTML:function(){
var _19="";
if(navigator.plugins&&navigator.mimeTypes&&navigator.mimeTypes.length){
if(this.getAttribute("doExpressInstall")){this.addVariable("MMplayerType","PlugIn");}
_19="<embed type=\"application/x-shockwave-flash\" src=\""+this.getAttribute("swf")+"\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\"";
_19+=" id=\""+this.getAttribute("id")+"\" name=\""+this.getAttribute("id")+"\" ";
var _1a=this.getParams();
for(var key in _1a){_19+=[key]+"=\""+_1a[key]+"\" ";}
var _1c=this.getVariablePairs().join("&");
if(_1c.length>0){_19+="flashvars=\""+_1c+"\"";}
_19+="/>";
}else{
if(this.getAttribute("doExpressInstall")){this.addVariable("MMplayerType","ActiveX");}
_19="<object id=\""+this.getAttribute("id")+"\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\">";
_19+="<param name=\"movie\" value=\""+this.getAttribute("swf")+"\" />";
var _1d=this.getParams();
for(var key in _1d){_19+="<param name=\""+key+"\" value=\""+_1d[key]+"\" />";}
var _1f=this.getVariablePairs().join("&");
if(_1f.length>0){_19+="<param name=\"flashvars\" value=\""+_1f+"\" />";}
_19+="</object>";}
return _19;
},write:function(_20){
if(this.getAttribute("useExpressInstall")){
var _21=new deconcept.PlayerVersion([6,0,65]);
if(this.installedVer.versionIsValid(_21)&&!this.installedVer.versionIsValid(this.getAttribute("version"))){
this.setAttribute("doExpressInstall",true);
this.addVariable("MMredirectURL",escape(this.getAttribute("xiRedirectUrl")));
document.title=document.title.slice(0,47)+" - Flash Player Installation";
this.addVariable("MMdoctitle",document.title);}}
if(this.skipDetect||this.getAttribute("doExpressInstall")||this.installedVer.versionIsValid(this.getAttribute("version"))){
var n=(typeof _20=="string")?document.getElementById(_20):_20;
n.innerHTML=this.getSWFHTML();
return true;
}else{
if(this.getAttribute("redirectUrl")!=""){document.location.replace(this.getAttribute("redirectUrl"));}}
return false;}};
deconcept.SWFObjectUtil.getPlayerVersion=function(_23,_24){
var _25=new deconcept.PlayerVersion([0,0,0]);
if(navigator.plugins&&navigator.mimeTypes.length){
var x=navigator.plugins["Shockwave Flash"];
if(x&&x.description){_25=new deconcept.PlayerVersion(x.description.replace(/([a-z]|[A-Z]|\s)+/,"").replace(/(\s+r|\s+b[0-9]+)/,".").split("."));}
}else{try{
var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
for(var i=3;axo!=null;i++){
axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash."+i);
_25=new deconcept.PlayerVersion([i,0,0]);}}
catch(e){}
if(_23&&_25.major>_23.major){return _25;}
if(!_23||((_23.minor!=0||_23.rev!=0)&&_25.major==_23.major)||_25.major!=6||_24){
try{_25=new deconcept.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(","));}
catch(e){}}}
return _25;};
deconcept.PlayerVersion=function(_29){
this.major=parseInt(_29[0])!=null?parseInt(_29[0]):0;
this.minor=parseInt(_29[1])||0;
this.rev=parseInt(_29[2])||0;};
deconcept.PlayerVersion.prototype.versionIsValid=function(fv){
if(this.major<fv.major){return false;}
if(this.major>fv.major){return true;}
if(this.minor<fv.minor){return false;}
if(this.minor>fv.minor){return true;}
if(this.rev<fv.rev){return false;}return true;};
deconcept.util={getRequestParameter:function(_2b){
var q=document.location.search||document.location.hash;
if(q){
var _2d=q.indexOf(_2b+"=");
var _2e=(q.indexOf("&",_2d)>-1)?q.indexOf("&",_2d):q.length;
if(q.length>1&&_2d>-1){
return q.substring(q.indexOf("=",_2d)+1,_2e);
}}return "";}};
if(Array.prototype.push==null){
Array.prototype.push=function(_2f){
this[this.length]=_2f;
return this.length;};}
var getQueryParamValue=deconcept.util.getRequestParameter;
var FlashObject=deconcept.SWFObject; // for backwards compatibility
var SWFObject=deconcept.SWFObject;


#12 Денис 30-04-2015 в 10:11
На IE 11 не работает. Ни кто не знает как исправить?
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


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

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки