<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3D Tag Cloud</title>
<style type="text/css">
body{
background:#DDD;
color:#000;
}
a{
color:#009;
}
a:hover{color:#00F;}
address
{
font-family:Georgia;
font-style:normal;
text-align:right;
}
#tagcloud{
background:#FFF;
border:1px solid #000;
font:14px Verdana,sans-serif;
height:400px;
overflow:hidden;
position:relative;
width:400px;
}
#tagcloud ul,#tagcloud li{
list-style:none;
margin:0;
padding:0;
}
#tagcloud a{
/* background:#FFF;
border:1px solid #FFF; */
color:#000;
left:50%;
line-height:1.2em;
margin:-0.6em 0 0 0;
padding:0 0.2em;
position:absolute;
text-align:center;
text-decoration:none;
top:50%;
}
#tagcloud a:hover{
background:#FFF;
border:1px solid #00F;
z-index:1000 !important;
}
</style>
</head>
<body>
<h1>3D Tag Cloud</h1>
<div id="tagcloud" onmousemove="stepping = (event.clientY - container.offsetTop) / container.offsetHeight * 0.2 - 0.1;">
<ul>
<li><a href="http://www.google.co.in">Animesh</a></li>
<li><a href="#">Yatharth</a></li>
<li><a href="#">Anushree</a></li>
<li><a href="#">Udit</a></li>
<li><a href="#">Shalvi</a></li>
<li><a href="#">Shrey</a></li>
<li><a href="#">Mayank</a></li>
<li><a href="#">Rohit</a></li>
<li><a href="#">Sonal</a></li>
<li><a href="#">Rashi</a></li>
<li><a href="#">Himanshu</a></li>
<li><a href="#">Nikita</a></li>
<li><a href="#">Ankita</a></li>
<li><a href="#">Shobit</a></li>
<li><a href="#">Sonam</a></li>
<li><a href="#">Manish</a></li>
<li><a href="#">Bhavya</a></li>
<li><a href="#">Kapish</a></li>
<li><a href="#">Pallavi</a></li>
<li><a href="#">Parul</a></li>
</ul>
</div>
<script type="text/javascript">
var a = 0, b = 0, e;
var offA = 0, stepping = 0.01;
var container = document.getElementById("tagcloud");
window.onload = function()
{
e = container.getElementsByTagName("A");
for (var i = e.length - 1; i >= 0; i--)
{
e[i].tcAngle = i * Math.PI * 2 / e.length;
}
setInterval(function()
{
for (var i = e.length - 1; i >= 0; i--)
{
var angle = e[i].tcAngle + offA;
x = 50 + Math.sin(angle) * 20;
y = 50 + Math.cos(angle) * 40;
tcSize = Math.round(20 - Math.sin(angle) * 10);
e[i].style.fontSize = tcSize + "px";
e[i].style.zIndex = tcSize;
e[i].style.left = (container.offsetWidth * x / 100 - e[i].offsetWidth / 2) + "px";
e[i].style.top = y + "%";
}
offA += stepping;
}, 10);
}
</script>
</body>
</html>This basically forms a wheel/ring kind of a tag cloud !
What should I do if I wish to convert it into a spherical one ??
Generally the spherical tag cloud is made using Flash ... which I do not know !
So, I want to do it with JavaScript !
Please help !
