Matière:
1. Il a été constaté qu'il n'y avait pas suffisamment d'instances et qu'il était impossible de les survoler (à résoudre)
2. Le système ne peut pas colorer de manière aléatoire et automatique (à résoudre)
Tout d’abord, un site Web de grande envergure utilisant le nuage de tags : le site de partage de photos Flickr. Le concepteur du nuage de tags est le concepteur d'interaction Stewart Butterfield. Plus tard, le nuage de tags a été adopté par des sites Web tels que del et Technorati.
La première apparition publiée d'un nuage de tags (ou du moins d'une liste pondérée) qui se résumait principalement à des « fichiers subliminaux » était dans Microserfs de Douglas Coupland (1995). Dans Lester Leaps Out, le poète gallois Landau utilise la même logique pour pondérer le texte afin de créer une carte graphique du texte pour décrire la musique jazz. Le poème apparaît dans son livre Magic Fire Chevrolet (1980).
extrait de code HTML
Copiez le code comme suit :
<!DOCTYPEhtml>
<html>
<en-têtes>
<méta charset=utf-8 />
<title>Étiquette sphérique 3D</title>
<link rel="stylesheet" type="text/css" href="3Dtag_style.css" />
<script type="text/javascript" src="3Dtag.js"></script>
</en-têtes>
<corps>
<identifiant div="div1">
<a href="#">Catégories de fruits</a>
<a href="#">Pomme</a>
<a href="#">Banane</a>
<a href="#">Pastèque</a>
<a href="#">Étiquette 3D</a>
<a href="#">Référencement</a>
<a href="#">Fruit du dragon</a>
<a href="#">Poire</a>
<a href="#">Sphérique</a>
<a href="#">CSS</a>
<a href="#">PHP</a>
<a href="#">Java</a>
<a href="#">Hériter</a>
<a href="#">C#</a>
<a href="#">POO</a>
<a href="#">Catégories de langues</a>
<a href="#">Tomates</a>
<a href="#">C++</a>
<a href="#">C</a>
<a href="#">Tomate</a>
<a href="#">démo</a>
</div>
<p>Balise sphérique 3D</p>
</body></html>
Extrait Javascript
Copiez le code comme suit :
var rayon = 120; //Rayon de rotation ;
var dtr = Math.PI/180 ;
vard=300 ;
var mcListe = [];
var actif = faux ;
var dernière = 1 ;
var dernierb = 1;
var distribution = vrai ;
var tvitesse=10 ;
taille variable = 250 ;
var sourisX=0;
var sourisY=0;
var commentElliptique=1;
var aA = nul ;
var oDiv = nul ;
window.onload=fonction ()
{
var je = 0 ;
var oTag=null;
oDiv=document.getElementById('div1');
aA=oDiv.getElementsByTagName('a');
pour(i=0;i<aA.length;i++)
{
oTag={} ;
oTag.offsetWidth=aA[i].offsetWidth ;
oTag.offsetHeight=aA[i].offsetHeight;
mcList.push(oTag);
}
sinusCosinus( 0,0,0 );
positionTout();
oDiv.onmouseover=fonction ()
{
actif = vrai ;
} ;
oDiv.onmouseout=fonction ()
{
actif=faux ;
} ;
oDiv.onmousemove=fonction (ev)
{
var oEvent=window.event ||
mouseX=oEvent.clientX-(oDiv.offsetLeft+oDiv.offsetWidth/2);
mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2);
sourisX/=5;
sourisY/=5;
} ;
setInterval(mise à jour, 30);
} ;
fonction mise à jour()
{
var une;
varb;
si (actif)
{
a = (-Math.min( Math.max( -mouseY, -size ), taille ) / rayon ) * tspeed;
b = (Math.min( Math.max( -mouseX, -size ), taille ) / rayon ) * tspeed;
}
autre
{
a = dernière * 0,98 ;
b = dernier b * 0,98 ;
}
dernier=a;
dernierb=b;
si(Math.abs(a)<=0,01 && Math.abs(b)<=0,01)
{
retour;
}
var c = 0 ;
sinusCosinus(a,b,c);
pour(var j=0;j<mcList.length;j++)
{
var rx1=mcList[j].cx;
var ry1=mcList[j].cy*ca+mcList[j].cz*(-sa);
var rz1=mcList[j].cy*sa+mcList[j].cz*ca;
var rx2=rx1*cb+rz1*sb;
var ry2=ry1;
var rz2=rx1*(-sb)+rz1*cb;
var rx3=rx2*cc+ry2*(-sc);
var ry3=rx2*sc+ry2*cc;
varrz3=rz2;
mcList[j].cx=rx3;
mcList[j].cy=ry3;
mcList[j].cz=rz3;
par=d/(d+rz3);
mcList[j].x=(howElliptical*rx3*per)-(howElliptical*2);
mcList[j].y=ry3*per;
mcList[j].scale=per;
mcList[j].alpha=per;
mcList[j].alpha=(mcList[j].alpha-0.6)*(10/6);
}
doPosition();
profondeurTri();
}
fonction profondeurSort()
{
var je = 0 ;
var aTmp=[];
pour(i=0;i<aA.length;i++)
{
aTmp.push(aA[i]);
}
aTmp.sort
(
fonction (vItem1, vItem2)
{
si(vItem1.cz>vItem2.cz)
{
renvoie -1 ;
}
sinon si(vItem1.cz<vItem2.cz)
{
renvoyer 1 ;
}
autre
{
renvoie 0 ;
}
}
);
pour(i=0;i<aTmp.length;i++)
{
aTmp[i].style.zIndex=i;
}
}
fonction positionTout()
{
varphi=0;
var thêta=0 ;
var max=mcList.length;
var je = 0 ;
var aTmp=[];
var oFragment=document.createDocumentFragment();
//Tri aléatoire
pour(i=0;i<aA.length;i++)
{
aTmp.push(aA[i]);
}
aTmp.sort
(
fonction()
{
return Math.random()<0.5?1:-1;
}
);
pour(i=0;i<aTmp.length;i++)
{
oFragment.appendChild(aTmp[i]);
}
oDiv.appendChild(oFragment);
pour(var i=1; i<max+1; i++){
si (distribution)
{
phi = Math.acos(-1+(2*i-1)/max);
thêta = Math.sqrt(max*Math.PI)*phi;
}
autre
{
phi = Math.random()*(Math.PI);
thêta = Math.random()*(2*Math.PI);
}
//Transformation de coordonnées
mcList[i-1].cx = rayon * Math.cos(theta)*Math.sin(phi);
mcList[i-1].cy = rayon * Math.sin(theta)*Math.sin(phi);
mcList[i-1].cz = rayon * Math.cos(phi);
aA[i-1].style.left=mcList[i-1].cx+oDiv.offsetWidth/2-mcList[i-1].offsetWidth/2+'px';
aA[i-1].style.top=mcList[i-1].cy+oDiv.offsetHeight/2-mcList[i-1].offsetHeight/2+'px';
}
}
fonction doPosition()
{
var l=oDiv.offsetWidth/2;
var t=oDiv.offsetHeight/2;
pour(var i=0;i<mcList.length;i++)
{
aA[i].style.left=mcList[i].cx+l-mcList[i].offsetWidth/2+'px';
aA[i].style.top=mcList[i].cy+t-mcList[i].offsetHeight/2+'px';
aA[i].style.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';
aA[i].style.filter="alpha(opacity="+100*mcList[i].alpha+")";
aA[i].style.opacity=mcList[i].alpha;
}
}
fonction sinusCosinus(a, b, c)
{
sa = Math.sin(a * dtr);
ca = Math.cos(a * dtr);
sb = Math.sin(b * dtr);
cb = Math.cos(b * dtr);
sc = Math.sin(c * dtr);
cc = Math.cos(c * dtr);
}
Extrait de code CSS
Copiez le code comme suit :
corps {arrière-plan : #000 url(index.png) centre sans répétition 230px ;}
#div1 {position : relative ; largeur : 450 px ; hauteur : 450 px ; marge : 20 px auto 0 ;
#div1 a {position : absolute ; top : 0px ; gauche : 0px ; famille de polices : Microsoft YaHei;
#div1 a:hover {border: 1px solid #eee background: #000 }
#div1 .blue {couleur:bleu;}
#div1 .red {couleur:rouge;}
#div1 .jaune {couleur:jaune;}
p { police : 16px Microsoft YaHei ; alignement du texte : centre ; couleur : #ba0c0c ;
pa { taille de police : 14px ; couleur : #ba0c0c }
pa: survol { couleur : rouge }