Un nuage de tag en 3D sans flash : c’est possible, avec jquery et tagSphere!

Dans cet article :
  1. Javascript
  2. HTML
  3. CSS

Les utilisateurs de wordpress et autres CMS savent q’il existe des générateurs de nuages de tags en 3D, mais en flash. C’est jolis tout ça mais c’est du flash, quel dommage… Que nenni, avec Jquery, c’est possible !

Javascript

Le fonctionnement est assez simple. Il y a deux prérequis : Installez jquery sur votre page (la plupart des CMS l’ont par défaut, mais au cas où il suffit de rajouter entre <head> et </head> :

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>

Après, téléchargez le plugin jquery qui nous intéresse : jquery.tagSphere.js et insérez là dans votre page HTML, juste après jquery :

<script type="text/javascript" src="jquery.tagSphere.js"></script>

Voilà, nous pouvons démarrer.  L’utilisation est extrêmement simple.  Voilà par exemple le code que j’ai mis pour ma part, juste après l’insertion de tagSphere :

<script>
$(document).ready(function(){
  $('#tagsphere').tagSphere({
    height: 230,
    width: 380,
    slower: 0.80,
    radius: 80,
    timer: 50,
    fontMultiplier: 20
  });
});
</script>

 

HTML

Ensuite, dans le corps de la page :

<div>
  <ul>
  <li><a  href="#">Mot clé 1</a></li>
  <li><a  href="#">Mot clé 2</a></li>
  <li><a  href="#">Mot clé 3</a></li>
  <li><a  href="#">Mot clé 4</a></li>
  <li><a  href="#">Mot clé 5</a></li>
  <li><a  href="#">Mot clé 6</a></li>
  <li><a  href="#">Mot clé 7</a></li>
  <li><a  href="#">Mot clé 8</a></li>
  <li><a  href="#">Mot clé 9</a></li>
  <li><a  href="#">Mot clé 10</a></li>
  <li><a  href="#">Mot clé 11</a></li>
  <li><a  href="#">Mot clé 12</a></li>
  <li><a  href="#">Mot clé 13</a></li>
  <li><a  href="#">Mot clé 14</a></li>
  <li><a  href="#">Mot clé 15</a></li>
  <li><a  href="#">Mot clé 16</a></li>
  <li><a  href="#">Mot clé 17</a></li>
  <li><a  href="#">Mot clé 18</a></li>
  <li><a  href="#">Mot clé 19</a></li>
  </ul>
</div>

Vous noterez les class= »link1″, class= »link2″ et class= »link3″. C’est par ce que le résultat brut de fonderie ne me plaisait pas, et que je souhaitait insérer un système de coloration en fonction du « poids » des tags. En effet, pas possible de modifier la taille mais la couleur si !

 

 

 

 

CSS

Donc pour un poil de customisation graphique, on peut rajouter les styles suivants :

#tagsphere{
  background: url('/images/background.png') top center no-repeat;
  height: 230px; width: 380px;
  padding: 10px;
  margin: 10px;
  margin: 0 auto;
}
ul li a, ul li a:visited{
  color: #E29154;
  font-weight: bold;
  text-decoration: none;
}
ul li a:hover, ul li.link1 a:hover, ul li.link2 a:hover, ul li.link3 a:hover{
  color: #4EB6BF;
}
ul li.link1 a{
  color: #D8B596;
}
ul li.link2 a{
  color: #EAAF84
}
ul li.link3 a{
  color: #FF8000;
}

Et on obtient le résultat tout en haut. Vous pouvez voir la démo pleine page ici


9 commentaires

  1. Bonjour,
    Merci pour ces infos si intéressants!!

    J’ai deux soucis ce qui me concerne, le premier est : quand je réduis la largeur de la balise qui contient le tag à 145px, son comportement n’est plus le même que dans votre exemple kicoe, mon tag tourne tout le temps de droite vers la gauche, et quand je survole le tag sur un mot, le mot ne revient pas, il continue à tourner, le temps c’est pareil va super vite, j’ai réussi à le ralentir mais il n’est pas fluide, il est entrecoupé.

    Mon deuxième soucis, je voudrais savoir à quelle moment on insère ce que vous appelez « //PATCH », j’ai inséré celui de:

    « var randomSize = Math.floor((Math.random()*12)+8);
    jTag.find(« a »).css(« font-size », randomSize+ »px »);
    jTag.mySize = randomSize; »

    juste après

     » var i = 0; i < tags.length; i++) {var jTag = jQuery(tags[i]); "

    lequel fonctionne apparemment bien, j'ai bien des tailles différentes de typos, par contre, mes mots ne diminuent pas quand ils passent par derrière (effet 3D), ils restent toujours à la même taille.

    Pour les autres : " //PATCH " impossible de les insérer, il me dit que j'ai une erreur de syntaxe au niveau de :

    " 'left': forCalcs.whratio * (tags[j].x – tags[j].w * per) + forCalcs.halfWidth, "

    ou quand j'insère seul le :

    //PATCH
    var currSize = tags[j].mySize;
    tags[j].find("a").css({ 'font-size': currSize*((Math.round(-tags[j].cz)/100)+0.5) + 'px'});

    après de celui " var randomSize = Math. flor ……………

    j'ai toute ma liste de mots dans une seule ligne, et un mot par dessus de l'autre.

    Si vous pouviez m'aider à solutionner ces interrogations, ça serait super SYMPA !!!!

    MERCI BEAUCOUP !!!

    1. Bonjour !

      Pour le premier problème, avez-vous bien pensé à modifier le css ET le javascript? Comme ceci :

      $(‘#tagsphere’).tagSphere({
      height: 230,
      width: 145,
      slower: 0.80,
      radius: 80,
      timer: 50,
      fontMultiplier: 20
      });

      Pour ce qui est du second problème, j’avoue ne pas avoir testé la proposition de ESource pour le moment, mais ce plugin JQuery est vieux et n’est plus maintenu. Il n’est pas impossible qu’il ne soit plus compatible…

      Cependant, j’en ai déniché un autre plus récent et avec un bon support : http://www.goat1000.com/tagcanvas.php

      Tenez-moi au courant si ça vous aide !

  2. Bonjour,

    Je sais que ce script n’est plus tout récent, mais je l’ai utilisé dernièrement car il convenait parfaitement à ce que je souhaiter faire.

    Donc tout d’abord, merci.

    Ensuite, je me suis permis d’apporter quelques modifications, notamment en ce qui concerne la gestion des différentes tailles, tout en conservant l’effet de zoom lors du déplacement.

    – Voici ce que j’ai ajouté lors de la création des tags :

    function initTags(tagCont){
    tags = tagCont.children(‘ul’).children();
    tags.css({
    ‘position’: ‘absolute’,
    ‘list-style-type’: ‘none’,
    ‘list-style-position’: ‘outside’,
    ‘list-style-image’: ‘none’
    });
    for (var i = 0; i < tags.length; i++) {

    var jTag = jQuery(tags[i]);

    //PATCH
    var randomSize = Math.floor((Math.random()*22)+11);
    jTag.find("a").css("font-size", randomSize+"px");
    jTag.mySize = randomSize;

    – puis, lors de la mise à jour des tags :

    tags[j].css({
    'left': forCalcs.whratio * (tags[j].x – tags[j].w * per) + forCalcs.halfWidth,
    'top': forCalcs.hwratio * (tags[j].y – tags[j].h * per) + forCalcs.halfHeight,
    'opacity': tags[j].alpha,
    //'font-size': options.fontMultiplier * tags[j].alpha + 'px',
    'z-index': Math.round(-tags[j].cz)
    });

    //PATCH
    var currSize = tags[j].mySize;
    tags[j].find("a").css({ 'font-size': currSize*((Math.round(-tags[j].cz)/100)+0.5) + 'px'});

    – Explications :
    J'ai tout d'abord appliqué une taille aléatoire à chaque tag, puis j'ai stocké cette taille dans une variable.
    Lors de la mise à jour des tags, j'applique une formule (inspirée de celle déjà utilisée) afin de jouer sur le zoom de chaque tag. J'ai sorti la formule de la balise CSS car il fallait absolument cibler la balise A et non la balise LI pour que ceci fonctionne.

    En espérant que ceci puisse avoir un intérêt pour certains.

    Merci encore pour ce script.

  3. Bonjour vois j’ai fais un code qui me permet de creer un nuage de mot a partir de n’importe quelle texte cependant j’aimerais bien le mettre en 3D.
    Je ne comprends pas tres bien votre methode surtout le plugin
    Je vous laisse mon code :

    Nuage de Mot

    var canvas=document.getElementById(‘theCanvas’);
    var context=canvas.getContext(‘2d’);
    var text = « La décision Nicolas Nicolas Nicolas Nicolas de plusieurs candidats à la présidentielle, dont Nicolas Sarkozy et François Hollande, de suspendre leur campagne après le drame de Toulouse n’a pas été suivie par tous et n’a pas empêché mardi l’émergence de nouvelles polémiques. » ;
    var pattern = /((^|[^a-z0-9àáâãäåçèéêëìíîïðòóôõöùúûüýÿ])(article|lui|sont|son|après|sur|pas|par|au|autre|d|leur|y|du|et|n|j|l|s|se|aux|tout|tous|sera|été|la|le|les|sans|de|des|en|pour|un|une|les|des|mais|ou|est|donc|or|ni|car|puis|je|tu|il|nous|vous|ils|dans|ta|ton|tes|pour|qui|que|si|ainsi|quoi|votre|de|à|a)[xs]?)+([^a-z0-9àáâãäåçèéêëìíîïðòóôõöùúûüýÿ]|$)/gi;
    var textWithoutShortWord = text;
    textWithoutShortWord = textWithoutShortWord.replace(pattern,  »  » );
    var patternWord=/[wàáâãäåçèéêëìíîïðòóôõöùúûüýÿ]+/gi;
    var words = textWithoutShortWord.match(patternWord);
    context.font= « 16px Helvetica »;
    var newArray= new Array();

    var positionX=0;
    var positionY= 24 ;
    var limitWidth = canvas.width;

    for(i = 0; i=1)
    {
    positionX=positionX+wordWidth;
    context.fillText(words[index],positionX,positionY);
    wordWidth = 5+context.measureText(words[index]).width;
    newArray[words[index]]=0;
    context.font=newArray[words[index]]* »12pt Helvetica »;

    }
    }
    if(positionX>limitWidth-90)

    {
    positionX=0;
    positionY=positionY+65;
    }

    }

  4. Magnifique effet et très simple a prendre en main

    Dans le code Jquery tu as laisser traîner une balise

    $(document).ready(function(){
    $(‘#tagsphere’).tagSphere({
    height: 230,
    width: 380,
    slower: 0.80,
    radius: 80,
    timer: 50,
    fontMultiplier: 20
    });
    });

    En tout cas Merci

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *