DmitryBelg,
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JS PF taak: TagCloud</title>
<style>
#tagContainer {
position:relative;
background-color:#FFE4E1;
margin:1em;
padding:0;
width: 500px;
height:400px;
overflow:hidden;
border:2px solid silver;
}
span.tag {
position:absolute;
top:0;
left:0;
text-shadow: 5px 1px 3px #FFFAFA;
font-weight: 400;
}
</style>
<script>
var arrTags = [
["Javascript", 1634, 987],
["jQuery", 1111, 34],
["PHP", 1024, 1122],
["Asp.Net", 977, 1005],
["Photoshop", 594, 789],
["XML", 40, 666],
["Access", 55, 77],
["Java", 278, 277],
["MySQL", 155, 122]
];
window.onload = function() {
var tagCont = document.getElementById("tagContainer");
function sum(el) {
return el[1] + el[2]
}
arrTags.sort(function(a, b) {
return sum(a) - sum(b)
});
for (var i = 0; i < arrTags.length; i++) {
var eSpan = document.createElement("span");
eSpan.className = "tag";
var font = 12 + (i * i);
var x = Math.floor(Math.random() * 250);
var y = Math.floor(Math.random() * 250);
eSpan.style.fontSize = font + "px";
eSpan.style.left = x + "px";
eSpan.style.top = y + "px";
eSpan.style.color = "#" + ("000000" + (Math.random() * 16777215 | 0).toString(16)).slice(-6);
eSpan.innerHTML = arrTags[i][0];
tagCont.appendChild(eSpan)
}
};
</script>
</head>
<body>
<div id="tagContainer"></div>
</body>
</html>