开发者

Display a bunch of links as cloud

开发者 https://www.devze.com 2023-03-18 00:22 出处:网络
My client wants me to create a page with a bunch of external links displayed as a cloud. He wants to have the ability to add external links and edit font size and it\'s color.

My client wants me to create a page with a bunch of external links displayed as a cloud. He wants to have the ability to add external links and edit font size and it's color.

This cloud must be located in the center of the page and grow from the center. I found ready solution, but it doesn't work perfectly and needs to be fixed. I tried to fix it but unfortunately did not succeed. For example I cannot understand why changing colors doesn't work. Here it is:

    <?

      $array = array (
    0 => array ('link' => 'http://123.com', 'name' => 'qq', 'cnt' => 100)
  , 1 => array ('link' => 'http://123.com', 'name' => 'ww', 'cnt' => 2)
  , 2 => array ('link' => 'http://123.com', 'name' => 'ee', 'cnt' => 3)
  , 3 => array ('link' => 'http://123.com', 'name' => 'rr', 'cnt' => 61)
  , 4 => array ('link' => 'http://123.com', 'name' => 'tt', 'cnt' => 5)
  , 5 => array ('link' => 'http://123.com', 'name' => 'yy', 'cnt' => 60)
  , 6 => array ('link' => 'http://123.com', 'name' => 'uu', 'cnt' => 7)
  , 7 => array ('link' => 'http://123.com', 'name' => 'ii', 'cnt' => 8)
  , 8 => array ('link' => 'http://123.com', 'name' => 'iii', 'cnt' => 9)
  , 9 => array ('link' => 'http://123.com', 'name' => 'oo', 'cnt' => 10)
  , 10 => array ('link' => 'http://123.com', 'name' => 'pp', 'cnt' => 11)
  , 11 => array ('link' => 'http://123.com', 'name' => 'aa', 'cnt' => 12)
  , 12 => array ('link' => 'http://123.com', 'name' => 'ss', 'cnt' => 10)
  , 13 => array ('link' => 'http://123.com', 'name' => 'dd', 'cnt' => 11)
  , 14 => array ('link' => 'http://123.com', 'name' => 'ff', 'cnt' => 12)
  , 15 => array ('link' => 'http://123.com', 'name' => 'gg', 'cnt' => 10)
  );

  echo '<div style="font-family:arial; font-size: 10px; width: 300px; text-align: center; position: absolute;
    top: 100px;    left: 50%;    margin-left: -150px;">';
  $params['min_size'] = 100;                    
  $params['max_size'] = 1000;                    
  $params['colors'] = array(0 => 'red', 1 => 'blue', 2 => 'brown', 3 => 'pink', 4 => 'green');
  ntts_cloud_ShowCloud($array, $params);
  echo '</div>';


 function ntts_cloud_FlipArray($array)
    {
      $rows = array_keys($array);
      $first_row_key = $rows[0];
      $cols = array_keys($array[$first_row_key]);

      $rows_cnt = count($rows);
      $cols_cnt = count($cols);

      for($i = 0; $i < $rows_cnt; $i++)
      {
        for($j = 0; $j < $cols_cnt; $j++)
        {
          $result[$cols[$j]][$rows[$i]] = $array[$rows[$i]][$cols[$j]];
        }
      }
      return $result;    
    }


function ntts_cloud_ShowCloud($entries, $config = 0)
    {
      //$entries is array of cloud elements
      //each element should be present as associative array with follows keys 
      //'name' - name of the element
      //'link' - URL
      //'cnt'  - weight of the element


      $colors = array(
      0 => '73cf3b', 
      1 => '000', 
      2 => '000', 
      3 => '000',
      4 => '000', 
      5 => 'red', 
      6 => '000', 
      7 => '000',
      8 => '000', 
      9 => '000', 
      10 => '000', 
      11 => '000',
      12 => '000', 
      13 => '000', 
      14 => '000', 
      15 => '000');                  
      //font size in percent
      $min_size = (isset($config['min_size'])) ? $config['min_size'] : 100;
      $max_size = (isset($config['max_size'])) ? $config['max_size'] : 200;

      if(is_array($config))
      {
        if(isset($config['colors']) && is_array($config['colors']))
        {
          $colors = $config['colors'];
        }
      }


      $flipped = ntts_cloud_FlipArray($entries);
      $min        = min($flipped['cnt']);
      $max        = max($flipped['cnt']);
      array_multisort($flipped['cnt'], SORT_DESC, $flipped['name'], $flipped['link']);
      $entries = ntts_cloud_FlipArray($flipped);

      $shown_entries = array();
      $keys          = array();
      $cnt = count($entries);

      $limit = (isset($config['limit'])) ? min($config['limit'], $cnt) : $cnt;

      for($i = 0; $i < $limit; $i++)
      {
        $entries[$i]['cnt'] -= $min;
        if($max > $min)
        {
          $entries[$i]['c开发者_开发技巧nt'] /= ($max - $min);
        }      
        $entries[$i]['cnt'] *= ($max_size - $min_size);
        $entries[$i]['cnt'] += $min_size;
        $entries[$i]['cnt']  = round($entries[$i]['cnt']);
        $key = md5($entries[$i]['name']);
        $shown_entries[$key] = $entries[$i];
        $keys[$i] = $key;
        //проверка корректности url на наличие префикса http://
        if(!preg_match('/^http:/i', $entries[$i]['link'])) 
        {
          $shown_entries[$key]['link'] = 'http://'.$entries[$i]['link'];
        }
      }


      sort($keys);
      $cnt = count($keys);
      $colors_cnt = count($colors);
      for($i = 0; $i < $cnt; $i++)
      {
        $key = $keys[$i];
        $idx = hexdec($key[31]) % $colors_cnt;
        $color = $colors[$idx];
        echo '<nobr><a href='.$shown_entries[$key]['link']
          .' style="font-size:'.$shown_entries[$key]['cnt'].'%; '
          .' text-decoration:none; color: #'.$color.';'
          .'">'.$shown_entries[$key]['name'].'</a></nobr> ' ;
      }

    }



 ?>

<?                 error_reporting(7);


 function ntts_cloud_ShowCloud($entries, $config = 0)
    {

      foreach ($entries as $line)
      {
        echo '<nobr><a href='.$line['link']
          .' style="font-size:'.$line['cnt'].'px; '
          .' text-decoration:none; color: '.$line['color'].';'
          .'">'.$line['name'].'</a></nobr> ' ;
      }

    }

$array = array (
    0 => array ('link' => 'http://1.ru', 'name' => 'kdsf', 'cnt' => 18,'color'=>'red')
  , 1 => array ('link' => 'http://1.ru', 'name' => 'ddd', 'cnt' => 12,'color'=>'green')
  , 2 => array ('link' => 'http://1.ru', 'name' => ' ddd', 'cnt' => 26,'color'=>'black')
  , 3 => array ('link' => 'http://1.ru', 'name' => 'jjj', 'cnt' => 16,'color'=>'blue')
  , 4 => array ('link' => 'http://1.net', 'name' => 'ccc', 'cnt' => 38,'color'=>'#555555')
  , 5 => array ('link' => 'http://1.ru', 'name' => 'llll', 'cnt' => 40,'color'=>'gray')
  , 6 => array ('link' => 'http://1.net', 'name' => 'xxxx', 'cnt' => 15,'color'=>'red')
  , 7 => array ('link' => 'http://1.ru', 'name' => 'wewe', 'cnt' => 23,'color'=>'yellow')
  , 8 => array ('link' => 'http://1.ru', 'name' => 'ddd', 'cnt' => 30,'color'=>'#1234d5')
  );

  echo '<div style="margin-left:30%;font-family:arial; font-size: 10px; width: 300px; text-align: center">';
  ntts_cloud_ShowCloud($array, $params);
  echo '</div>';

  ?>


Just remove “#” in this line:

.' text-decoration:none; color: #'.$color.';'
0

精彩评论

暂无评论...
验证码 换一张
取 消