Carrousel d'images et de photos en mouvement (Animation Flash swf)



♦ Carrousel d'images et de photos en mouvement (Animation Flash swf)

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

Voici un exemple simple de carrousel avec des images ou photos ainsi que 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 images pour animer le contenu.

Ce slideshow requière Adobe Flash Player 9.0 (ou supérieur). JavaScript doit être fonctionnel.



Voici le code html et javascript pour cette animation flash:

Vous devrez modifier les fichier html et xml pour adapter l'animation flash à votre site web et les liens url qui correspondent à vos choix. Pour cela utilisez un éditeur comme Notepad++.

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

<html>

<head>
<title>Carousel d'images - XML et flash - Webinfotuto.free.fr</title>
<script type="text/javascript" src="swfobject.js"></script>

		<style type="text/css">
			body {
				font: 14pt Arial, Times, serif;
				height: 100%;
				color: #4D4D4D;
				background: #FFFFFF;
			}
			.carousel_container {
				width: 750px;
				height: 500px;
				margin: 0px auto;
				border: 1px solid #A7A69E;				
			}
		</style>
</head>

<body>


<div style="text-align: center; ">Passez la souris sur les mots et images pour animer le contenu.<br><br>
<div class="carousel_container">
	<div id="carousel1">
		<p>Ce slideshow requière <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player 9.0</a> (ou supérieur). JavaScript doit être fonctionnel.</p>
	</div>
</div>
<script type="text/javascript">
	swfobject.embedSWF("Carrousel.swf", "carousel1", "750", "500", "9.0.0", false, {xmlfile:"default.xml", loaderColor:"0x666666"}, {wmode: "transparent"});
</script>

</body>
</html>

Utilisez des images au format PNG.
Il vous faut aussi télécharger le zip contenant les fichiers Carrousel.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






0461944