Mettre un lien sur une animation flash

Bonjour,

Dans ce nouvel article de notre blog, je vais vous montrer comment mettre un lien sur une animation flash. Faudrait bien comprendre le  sens de mon opération. Ici nous sommes dans un cas de figure ou tu dispose d'un fichier swf ou flv et  que tu dois mettre sur un site avec un lien. c'est généralement le cas lors des programmes publicitaires sur des sites.

En effet le client désireux de faire passé son animation, te donne juste le fichier swf ou flv, puis son lien. A toi de rendre cela cliquable sur ton site. Bien évidement si le lien a été mis lors de la création du fichier flv ou swf, alors c'est plus la peine de faire autre chose. Mais ce n'est généralement pas le cas, car si l'on veut modifier le lien cible cela reviendrait à modifier encore l'animation, bref des couts supplémentaires largement évitables.

Bon pour cet article nous aurons besoin d'une image transparente ( png ou gif) ici  notre image sera transparent.gif et d'un fichier swf. Le but étant de faire passer notre image transparente devant l'animation flash. Il faut donc s'assurer que l'image et l'animation on les mêmes tailles.

Bien, dans la zone de votre page ou vous désirez faire passer l'animation, collez le code ci-dessous ( dans notre exemple, notre animation et notre image ont pour taille 150 x 150 )

<div>

<div id='devant'><a href='lien cible' target='_blank'><img src='transparent.gif'  width='150'  height='150' border='0'   /></a></div>

<div id='derriere'>

      <!--<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="150" height="150">

          <param name="movie" value="test.swf" />

          <param name="quality" value="high" />

          <embed src="test.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" 

width="150" height="150"></embed>

        </object>--></div>

    </div>

Bon expliquons le code maintenant

- devant et derriere sont des propriétés css qui seront décrites plus bas

- notre image s'appelle : transparent.gif 

- notre anim : test.swf

Bien cette partie traite du style css a intégrer entre les balises head de votre page

#devant{ 

z-index: 2;                   // style css pour définir l'ordre d'affichage des éléments

position:absolute;       // position dans le conteur

width: 150px;              // longueur des images

height: 150px              //  largeur des images

} 

#derriere { 

z-index: 1;                

position: absolute; 

width: 150px; 

height: 150px; 

}

Merci pour votre lecture. Au plaisir de vous revoir !!