Tilbage

CSS/Javascript-baseret tagcloud

Koden i denne artikel er skrevet 100% af mig og må kopieres, modificeres og anvendes helt frit :-)

Tagcloud'en opbygges med PHP:

<?

// Antal tags der skal vises
$show = 25;
// Farverne der random skal vælges mellem
$colors = array ("#FFFFFF", "#999999", "#7993A2", "#e98331");
// Font-størrelserne der random skal vælges mellem
$sizes = array (8, 9, 9, 10, 10, 12, 12, 14, 14, 16, 16, 18, 24, 36, 48);
// Største tilladte tag-bredde (pt)
$max_tagwidth = 200;


// Det antages, at tabellen 'pages' indeholder data for alle sites sider, hvor
// feltet 'url' indeholder sidens adresse og
// feltet 'keywords' indeholder sidens keywords/tags adskilt med mellemrum

// Der bør selvfølgelig være en WHERE-clause i forespørgslen, så kun sider
// der er aktive og faktisk har keywords kommer med!

$sql = "SELECT url, keywords FROM pages";
$query = mysql_query($sql);

$elements = array();
while ($row = mysql_fetch_assoc($query)) {
    $keywords = explode(" ", $row["keywords"]);
    foreach ($keywords as $kw) {
        $elements[] = $kw . "|" . $row["url"];
    }
}
shuffle($elements);
$elements = array_slice($elements, 0, $show);

$nSizes = count($sizes) - 1;
$nCols = count($colors) - 1;
$cloud = "";
foreach ($elements as $element) {
    $size = $sizes[rand(0, $nSizes)];
    $color = $colors[rand(0, $nCols)];
    list($keyword, $url) = explode("|", $element);
    $kw_strlen = strlen($keyword);
    if ($size * $kw_strlen > $max_tagwidth) $size = floor($max_tagwidth / $kw_strlen);
    $cloud .= "<a href='$url' style='font-size:{$size}pt; color:$color'>$keyword</a> ";
}

?>

Tagcloud'en indsættes i html:

<div id="tagcloud">
    <?= $cloud; ?>
</div>

Følgende javascript placeres lige før </body>:

<script type="text/javascript">
// <!--

function dolineheight() {
    document.getElementById('tagcloud').style.lineHeight = tempheight + '%';
    if (tempheight < stopheight) {
        tempheight += stepheight;
        setTimeout('dolineheight()', stepspeed);
    }
}

var tempheight = 10;   // Start-linjehøjde (%)
var stopheight = 225;  // Stop-linjehøjde (%)
var stepheight = 5;    // Linjehøjde step-værdi (%)
var stepspeed = 50;    // Tid i millisek pr. step

dolineheight();

// -->
</script>

Resultatet kan ses på forsiden