Разноцветное облако ссылок

Посмотрев на разноцветное облако ссылок и прочитав комментарии к сообщению, решил написать нечто подобное для собственного блога. На мой взгляд, привлекательный внешний вид такого облака позволяет получить дополнительное вниманте посетителей сайта.

В статье описан механизм формирования разноцветного облака ссылок на основе массива ссылок с заданными для них весами. Функции передается двумерный массив содержащий тройки вида "ссылка - имя - вес ссылки", а так же массив определяющий конфигурацию облака (размер шрифта, набор цветов и количество отображаемых ссылок).

  1.  
  2. function ntts_cloud_ShowCloud($entries, $config = 0)
  3. {
  4. //$entries is array of cloud elements
  5. //each element should be present as associative array with follows keys
  6. //'name' - name of the element
  7. //'link' - URL
  8. //'cnt' - weight of the element
  9.  
  10. //установка параметров отображения облака
  11. //определение цветов по умолчанию
  12. $colors = array(0 => 'fc3', 1 => '3f6', 2 => '36f', 3 => 'f3c');
  13. //font size in percent
  14. $min_size = (isset($config['min_size'])) ? $config['min_size'] : 100;
  15. $max_size = (isset($config['max_size'])) ? $config['max_size'] : 200;
  16.  
  17. if(is_array($config))
  18. {
  19. if(isset($config['colors']) && is_array($config['colors']))
  20. {
  21. $colors = $config['colors'];
  22. }
  23. }
  24.  
  25. //для сортировки ссылок по весу необходимо предварительно транспанировать
  26. //(перевернуть) матрицу
  27. $flipped = ntts_cloud_FlipArray($entries);
  28. //определение минимального и максимального веса для ссылок и сортировка массива
  29. $min = min($flipped['cnt']);
  30. $max = max($flipped['cnt']);
  31. array_multisort($flipped['cnt'], SORT_DESC, $flipped['name'], $flipped['link']);
  32. //обратный поворот матрицы
  33. $entries = ntts_cloud_FlipArray($flipped);
  34.  
  35. $shown_entries = array();
  36. $keys = array();
  37. $cnt = count($entries);
  38.  
  39. // определение количества отображаемых элементов,
  40. // если значение $config['limit'] не задано, тогда отображаются все элементы
  41. $limit = (isset($config['limit'])) ? min($config['limit'], $cnt) : $cnt;
  42.  
  43. //пересчет веса ссылок в размер шрифта
  44. for($i = 0; $i < $limit; $i++)
  45. {
  46. $entries[$i]['cnt'] -= $min;
  47. if($max > $min)
  48. {
  49. $entries[$i]['cnt'] /= ($max - $min);
  50. }
  51. $entries[$i]['cnt'] *= ($max_size - $min_size);
  52. $entries[$i]['cnt'] += $min_size;
  53. $entries[$i]['cnt'] = round($entries[$i]['cnt']);
  54. $key = md5($entries[$i]['name']);
  55. $shown_entries[$key] = $entries[$i];
  56. $keys[$i] = $key;
  57. //проверка корректности url на наличие префикса http://
  58. if(!preg_match('/^http:/i', $entries[$i]['link']))
  59. {
  60. $shown_entries[$key]['link'] = 'http://'.$entries[$i]['link'];
  61. }
  62. }
  63.  
  64. //сортировка по ключу перемешивает ссылки,
  65. //но сохраняет их порядок при каждом последующем запросе
  66. sort($keys);
  67. $cnt = count($keys);
  68. $colors_cnt = count($colors);
  69. for($i = 0; $i < $cnt; $i++)
  70. {
  71. $key = $keys[$i];
  72. //цвет ссылки так же зависти от ключа и будет одинаков при каждом вызове скрипта
  73. $idx = hexdec($key[31]) % $colors_cnt;
  74. $color = $colors[$idx];
  75. echo '<nobr><a href='.$shown_entries[$key]['link']
  76. .' style="font-size:'.$shown_entries[$key]['cnt'].'%; '
  77. .' text-decoration:none; color: #'.$color.';'
  78. .'">'.$shown_entries[$key]['name'].'</a></nobr> ' ;
  79. }
  80.  
  81. }
  82.  
  83.  

Выше использовалась функция для поворота двумерного массива, текст которой приводится ниже и, как мне кажется, не нуждается в пояснениях

  1.  
  2. function ntts_cloud_FlipArray($array)
  3. {
  4. $rows = array_keys($array);
  5. $first_row_key = $rows[0];
  6. $cols = array_keys($array[$first_row_key]);
  7.  
  8. $rows_cnt = count($rows);
  9. $cols_cnt = count($cols);
  10.  
  11. for($i = 0; $i < $rows_cnt; $i++)
  12. {
  13. for($j = 0; $j < $cols_cnt; $j++)
  14. {
  15. $result[$cols[$j]][$rows[$i]] = $array[$rows[$i]][$cols[$j]];
  16. }
  17. }
  18. return $result;
  19. }
  20.  
  21.  

Осталось привести пример кода для отображения облако и собственно результат работы скрипта

  1.  
  2. $array = array (
  3. 0 => array ('link' => 'nittis.ru', 'name' => 'сКЛАДбище мыслей', 'cnt' => 55)
  4. , 1 => array ('link' => 'seo.nittis.ru', 'name' => 'Эх, раскручу!', 'cnt' => 60)
  5. , 2 => array ('link' => 'it.nittis.ru', 'name' => 'Кумир святого Исидора', 'cnt' => 50)
  6. , 3 => array ('link' => 'http://seo4aynik.ru', 'name' => 'seo4aynik.ru', 'cnt' => 34)
  7. , 4 => array ('link' => 'http://pizdukov.net', 'name' => 'SEO пацан', 'cnt' => 8)
  8. , 5 => array ('link' => 'http://absurdity.ru/', 'name' => 'Абсурдный Людь', 'cnt' => 38)
  9. , 6 => array ('link' => 'http://www.patifonov.net/', 'name' => 'patifonov.net', 'cnt' => 53)
  10. , 7 => array ('link' => 'http://wp.nittis.ru', 'name' => 'WordPress under the hood', 'cnt' => 11)
  11. , 8 => array ('link' => 'http://secureblog.org/', 'name' => 'SecureBlog', 'cnt' => 49)
  12. );
  13.  
  14. echo '<div style="font-family:arial; font-size: 10px; width: 300px; text-align: center">';
  15. $params['min_size'] = 120;
  16. $params['max_size'] = 240;
  17. $params['colors'] = array(0 => 'fc3', 1 => '3f6', 2 => '36f', 3 => 'f3c', 4 => 'gray');
  18. ntts_cloud_ShowCloud($array, $params);
  19. echo '</div>';
  20.  
  21.  

Читайте в блоге

PHP. Преобразование таблицы в картинку. Создание информеров.
MFC. Использование HTML-интерфейса.
Рисуем график на PHP
Oracle. Преобразование даты в unix timestamp
Установка собственного OpenID сервера phpMyID

Метки: php

Комментарии:

Войдите на сайт, чтобы оставить комментарий