Insérer des médias

Kompozer et CSS

Insérer un diaporama d'images en flash

Lecteur  Dewslider

Télécharger l'archive dewslider sur le site Alsacreations et la décompresser dans un dossier "diaporama" se trouvant dans notre arborescence au même niveau que notre page.
Cette archive contient le fichier d'animation flash dewslider.swf et un fichier dewslider.xml sur lequel seront spécifiés les paramètres (options) et les  adresses des fichiers images.
Placer aussi les images dans ce dossier.

Code  HTML

Le code récupéré sur le site Alsacreations sera inséré sur notre page par le menu Insérer / code HTML.
Nous pouvons l'insérer dans une div aux bonnes dimensions et centrée sur la page.
Modifier les dimensions de l'animation en fonction des dimensions de nos images.
Modifier les chemins en ajoutant  diaporama/  devant les chemins de fichiers swf et xml

<object type="application/x-shockwave-flash" data="diaporama/dewslider.swf?xml=diaporama/dewslider.xml" width="500" height="375">
<param name="movie" value="diaporama/dewslider.swf?xml=diaporama/dewslider.xml" />
</object>

Si nous ne mettons pas l'animation dans une div, nous pouvons la centrer en  rajoutant dans la balise ouvrante objet l'attribut style avec pour valeur l'affichage bloc et des marges latérales automatiques
style="display: block; margin-right: auto; margin-left: auto;"


Code  XML

Ouvrir NotePad++  (encodage utf-8) et sur une page vierge coller le code xml récupéré sur le site Alsacreations.
Modifier les options à notre convenance
Modifier le chemin des images

<?xml version="1.0" ?>
<album
    showbuttons="yes"
    showtitles="yes"
  showrandom="no"
  randomstart="no"
  timer="5"
  aligntitles="bottom"
  alignbuttons="top"
  transition="blur"
  speed="20"
  >
    <img src="diaporama/image1.jpg" />
    <img src="diaporama/image2.jpg" />
    <img src="diaporama/image3.jpg" />
    <img src="diaporama/image4.jpg" />
    <img src="diaporama/image5.jpg" />
    <img src="diaporama/image6.jpg" />
</album>

Haut de page

Jos Argaud - Mise à jour 20/02/2010  Pour m'écrire  Document made with KompoZer