TOMBE LA NEIGE...

À cette époque de fêtes, on s'essaye parfois à créer des cartes de voeux animées avec plus ou moins de succès.

Problématique: Faire tomber la neige sur une image existante

Il vous faut:

• une image de fond (ici 500 px de côté)
• un gif animé de neige de même taille (500 px aussi)

1. Les <div> (Layers, couches ou calques et positionnement)

<div id="Layer1" style="height: 500px; position: absolute; left: 37%; top: 10px; width: 500px; z-index: 1;">
<img alt="" height="500" name="xxx" src="http://www.vinzblog.com/wp-content/uploads/2008/11/hiver.jpg" width="500" />
</div>
<div id="Layer2" style="height: 500px; position: absolute; left: 37%; top: 10px; width: 500px; z-index: 2;">
<img alt="" height="500" name="yyy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_xZ7Rg2rvQSpuMSuc8Bto2s-SyoLgFmn3FbvbH6MuJ2q5ZwD5AMZw2qp5Sj_S248AOcL-8hRGWTl9zmnVfyccElnVh6U64T1U31IrtMNFRzNSPqtAIR8f0CUwq7pjBAX_SnrywieiukVw/s400/DnvT9MIoVP1wpLYF7vbCybR8bC4.gif" width="500" /></div>

2. Images avec un <style> et positionnement (plus simple et plus "clean"). Notez qu'ici on peut superposer plus de 2 images comme dans le précédent.

<img style="display:block; position:absolute; left:37%; top:10px; width:500px; height:500px; z-index:1" src="http://www.vinzblog.com/wp-content/uploads/2008/11/hiver.jpg" width="137" height="132">
<img style="display:block; position:absolute; left:37%; top:10px; width:500px; height:500px; z-index:2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_xZ7Rg2rvQSpuMSuc8Bto2s-SyoLgFmn3FbvbH6MuJ2q5ZwD5AMZw2qp5Sj_S248AOcL-8hRGWTl9zmnVfyccElnVh6U64T1U31IrtMNFRzNSPqtAIR8f0CUwq7pjBAX_SnrywieiukVw/s400/DnvT9MIoVP1wpLYF7vbCybR8bC4.gif" width="137" height="132">

3. Tableau. Une autre solution consiste à mettre l'image de fond comme background d'un tableau à une seule cellule. C'est la méthode que je préfère car il n'y a pas de soucis de positionnement des <div> aux résultats parfois inattendus. Notez que l'on peut choisir de mettre l'image en arrière-plan (background) de la seule et unique cellule. Truc: si une vilaine marge apparaît en bas de l'image supérieure, rajoutez margin-bottom: -10px; dans le style de l'image.

<table align="center" border="0" cellpadding="0" cellspacing="0" style="background-image:url(http://www.vinzblog.com/wp-content/uploads/2008/11/hiver.jpg); height:500px; width:500px">
 <tbody>
  <tr>
   <td style="text-align:center"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_xZ7Rg2rvQSpuMSuc8Bto2s-SyoLgFmn3FbvbH6MuJ2q5ZwD5AMZw2qp5Sj_S248AOcL-8hRGWTl9zmnVfyccElnVh6U64T1U31IrtMNFRzNSPqtAIR8f0CUwq7pjBAX_SnrywieiukVw/s400/DnvT9MIoVP1wpLYF7vbCybR8bC4.gif" style="height:500px; width:500px" /></td>
  </tr>
 </tbody>
</table>

4. Tableau avec 3 images superposées (exemple en haut) dont 1 image de backgound dans le tableau, 1 mage dans la cellule et 1 image et une image inséréee normalement au niveau supérieur.

<div style="text-align: center;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="background-image: url(http://www.vinzblog.com/wp-content/uploads/2008/11/hiver.jpg); height: 500px; width: 500px;"><tbody>
<tr>    <td style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_xZ7Rg2rvQSpuMSuc8Bto2s-SyoLgFmn3FbvbH6MuJ2q5ZwD5AMZw2qp5Sj_S248AOcL-8hRGWTl9zmnVfyccElnVh6U64T1U31IrtMNFRzNSPqtAIR8f0CUwq7pjBAX_SnrywieiukVw/s400/DnvT9MIoVP1wpLYF7vbCybR8bC4.gif); text-align: center;"><p style="text-align: center;">
<img alt="" src="http://i.imgur.com/P7maUEA.png" style="height:401px; width:401px" /></p>
</td>   </tr>
</tbody> </table>
</div>

5. Un jeu d'iframe. Voir l'article précédent De la neige sur votre page