Flip avec animation Flash
(Images, Photos en mouvement de rotation)



♦ Flip avec animation Flash (Images, Photos en mouvement de rotation)

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

Voici un exemple simple d'images animées par rotation 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 images pour modifier le mouvement.


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



Voici le code html et javascript pour cette animation flash:

Vous pourrez modifier à votre convenance les fichiers html et xml avec un éditeur comme Notepad++. Cela vous permettra de régler la taille des images, l'URL associé pour le lien clicable...

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
		<title>Flip avec images</title>
		
        <script type="text/javascript" src="swfobject.js"></script>

		<style type="text/css">
			html, body {
				color: #000000;
				background-color: #FFFFFF;
			}
			.flip_container {
				width: 300px;
				height: 300px;
				margin: 0px auto;
			}
		</style>
</head>

<body>
<div style="text-align: center; ">Passez la souris sur les images pour modifier le mouvement.<br><br>
<div style="margin-left:auto; margin-right:auto; width: 300px; height: 350px; border: 1px solid #BBBAB5;">
<br>
<div class="flip_container>
	<div id="flip1">
		<p>Ce slideshow requière <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player 10.0</a> (ou supérieur). JavaScript doit être fonctionnel.</p>
	</div>
</div>
<script type="text/javascript">
	swfobject.embedSWF("Flip.swf", "flip1", "300", "300", "10.0.0", false, {xmlfile:"default.xml", loaderColor:"0xCCCCCC"}, {bgcolor: "#FFFFFF"});
</script>
</div></div>
</body>
</html>

Il vous faut aussi télécharger le zip contenant les fichiers flip.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







0488080