Тэги или "tag cloud".

пятница, 20 июля 2007 г.

Вы уже наверняка все видели на раздичных сайтах такие вещи как Тэги. Они в принципе упрощают навигацию по сайту и являются одним из атрибутов Web 2.0. Давайте попробуем сделать что-нибудь подобное.
Начало:

function printTagCloud($tags) {
// $tags в массиве

arsort($tags);
$max_size = 32; // максимальный размер шрифта в пикселях
$min_size = 12; // минимальный размер шрифта в пикселях

// самые большое и малое значения массива
$max_qty = max(array_values($tags));
$min_qty = min(array_values($tags));

// находим разницу в значениях
$spread = $max_qty - $min_qty;
if ($spread == 0) { // конечно не будем делить на ноль
$spread = 1;
}

// устанавливаем инкремент размера шрифта
$step = ($max_size - $min_size) / ($spread);

// проходим по массиву с тэгами
foreach ($tags as $key => $value) {
// высчитываем размер шрифта
// находим $value превышающую $min_qty
// умножаем на инкремент размера щрифта ($size)
// и добавляем $min_size
$size = round($min_size + (($value - $min_qty) * $step));

echo '<a href="#" style="font-size: ' . $size . 'px"
title="' . $value . ' things tagged with ' . $key . '">' . $key . '</a> ';
}
}

$tags = array('weddings' => 32, 'birthdays' => 41, 'landscapes' => 62,
'ham' => 51, 'chicken' => 23, 'food' => 91, 'turkey' => 47, 'windows' => 82, 'apple' => 27);

printTagCloud($tags);

Теперь готовим стиль
<style type="text/css">
.tag_cloud { padding: 3px; text-decoration: none; }
.tag_cloud:link { color: #81d601; }
.tag_cloud:visited { color: #019c05; }
.tag_cloud:hover { color: #ffffff; background: #69da03; }
.tag_cloud:active { color: #ffffff; background: #ACFC65; }
</style>

Потом

function get_tag_data() {
$arr = Array('Actionscript' => 35, 'Adobe' => 22, 'Array' => 44, 'Background' => 43,
'Blur' => 18, 'Canvas' => 33, 'Class' => 15, 'Color Palette' => 11, 'Crop' => 42,
'Delimiter' => 13, 'Depth' => 34, 'Design' => 8, 'Encode' => 12, 'Encryption' => 30,
'Extract' => 28, 'Filters' => 42, 'Flash' => 32, 'Functions' => 19,
'Gaussian Blur' => 44, 'Grafix' => 49, 'Graphics' => 35, 'Hue' => 47, 'Illustrator' => 8,
'Image Ready' => 12, 'Javascript' => 47, 'Jpeg' => 15, 'Keyboard' => 18, 'Level' => 28,
'Liquify' => 30, 'Listener' => 10, 'Logo' => 12, 'Loops' => 22, 'Macromedia' => 26,
'Method' => 28, 'MySQL' => 18, 'Obfuscation' => 13, 'Object' => 39, 'Optimize' => 25,
'PDF' => 37, 'PHP' => 44, 'PSD' => 17, 'Photography' => 28, 'Photoshop' => 46,
'Revert' => 50, 'Saturation' => 35, 'Save as' => 28, 'Scope' => 11, 'Scripting' => 9,
'Security' => 41, 'Sharpen' => 49, 'Switch' => 41, 'Templates' => 11, 'Texture' => 22,
'Tool Palette' => 30, 'Variables' => 50);
return $arr;

function get_tag_cloud() {
// Размер шрифта по умолчанию
$min_font_size = 12;
$max_font_size = 30;
$tags = get_tag_data();
//Наконец-таки создаем html с тэгами
$cloud_html = '';
$cloud_tags = array();
foreach ($tags as $tag => $count) {
$size = $min_font_size + ($count - $minimum_count)
* ($max_font_size - $min_font_size) / $spread;
$cloud_tags[] = '<a style="font-size: '. floor($size) . 'px'
. '" class="tag_cloud" href="http://www.google.com/search?q=' . $tag
. '" title="\'' . $tag . '\' returned a count of ' . $count . '">'
. htmlspecialchars(stripslashes($tag)) . '</a>';
}
$cloud_html = join("\n", $cloud_tags) . "\n";
return $cloud_html;
}

Использование:

<h3>Пример</h3>
<div id="wrapper"
>
<!-- BEGIN -->
<?php print get_tag_cloud(); ?>
<!-- END -->
</div>
Если Вы хотите использовать БД, то замените функцию get_tag_data на следующее:
function get_tag_data() {
mysql_connect('localhost', 'username', 'password');
mysql_select_db('database');
$result = mysql_query("SELECT * FROM tags GROUP BY tag ORDER BY count DESC");
while($row = mysql_fetch_array($result)) {
$arr[$row['tag']] = $row['count '];
}
ksort($arr);
return $arr;
}
Большое спасибо материалам с сайта www.roscripts.com

Copyright © 2010 WEB IT blog