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

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

Вход на сайт


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



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


Войти на сайт

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

Главная / Уроки по Flash / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

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

ДЕМО

Посмотреть
пример

СКАЧАТЬ

Исходники
44 Кб

Лазая по просторам интернета Вы, наверное, не раз натыкались на красивое крутящееся облако тегов. Это облако есть дополнение к популярному движку 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 Просмотров: 21188

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

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

Посмотреть предыдущие комментарии (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 -
*
* SWFObject is (c) 2006 Geoff Stearns and is released under the MIT License:
*
*
* **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 не работает. Ни кто не знает как исправить?
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

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

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