Nuage de mots et d'images animés (Tag Cloud)



♦ Nuage de mots et d'images animés (Tag Cloud)

(faites les dernières mises à jours sur votre ordinateur pour que flash player fonctionne correctement)

Voici un exemple simple de nuage de mots et d'images animés avec les fichiers SWF, XML et le code HTML que vous pouvez adapter et modifier facilement pour les placer sur votre Site Web.



Passez la souris sur les mots et images pour animer le contenu.



Voici le code html et javascript pour cette animation flash:

Vous pourrez modifier le texte au dessus des images ainsi que l'URL et mettre les couleurs qui vous conviennent. Pour cela ouvrez le fichier xml avec un éditeur comme Notepad++.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>
<TITLE>Nuage de mots et d'images - XML tagCloud et flash - Webinfotuto.free.fr - (Tag Cloud)</TITLE>
</HEAD>

<BODY>

<DIV>
<DIV style="text-align: center; ">Passez la souris sur les mots et images pour animer le contenu.<BR>

<DIV style="margin-left:auto; margin-right:auto; width:290px; height:390px; border: 1px solid #CCCBC8;">
<P id=cloud></P>
</DIV>

<SCRIPT type=text/javascript src="swfobject.js"></SCRIPT>

<SCRIPT type=text/javascript>
swfobject.addDomLoadEvent(function() {
  swfobject.embedSWF(
					"imgtagcloud.swf", "cloud",
					"290", "390",
					"9", "",
					{
						cloud_data:"cloud2.xml",
						tcolor:"0x999999",
						tcolor2:"0x666666",
						hicolor:"0x494949",
						tspeed:"150",
						fontFace:"Times New Roman"
					},
					{wmode: "transparent", menu: "false", quality: "best"}
					);
});
</SCRIPT>
</DIV>
</DIV>

</BODY>
</HTML>


Il vous faut aussi télécharger le zip contenant les fichiers imgtagcloud.swf, swfobject.js, et xml à copier dans le même répertoire que votre page html.


Lire la suite »





D'autres tutoriels :
Carrousel d'images
Flip avec images
Nuage de mots animés
Nuage de mots et images










0460631