Dreamweaver nous offre la possibilité d'afficher des images dynamiques, provenant d'une base de données, nous allons voir comment intervertir une image de grande taille placée à un endroit du document sur l'action d'une autre image de taille réduite (thumbnail), placé à un autre endroit du document (effet de roll-over), et ce de manière dynamique.

Pour créer cet effet sur l'événement onClick une extension est nécessaire, Apply N4 Return False Fix, disponible sur le site Project Seven.

Vous pouvez télécharger la base de données ainsi que les images utilisées dans ce tutorial.

• La base de données : db_video.zip (3.04 KB)
  
• Les images :  images.zip (62.88 KB)

Création du jeu d'enregistrement

On crée tout d'abord un jeu d'enregistrement, en sélectionnant les informations qui nous intéresse, en triant le résultat dans l'ordre voulu.

Insertion de l'image

Via le menu Insertion > Commun ou le raccourci clavier CTRL+Alt+I on insère l'image dynamique de taille réduite.

On sélectionne la source de l'image, en cochant la case Source de données puis en cliquant sur le champ de l'image, à savoir jaquette.

Il nous faut ensuite spécifier le dossier où se trouvent les images, on ajoute dans l'URL le nom de ce dossier, ici images, en rajoutant le préfixe "tn_" (pour thumbnail) devant le champ jaquette, ce qui nous permet de différencier les différentes images, tout en ayant un seul nom de ces mêmes images dans la base de données.

Bien sûr vous devez tenir compte de l'arborescence du dossier images, dans l'exemple celui-ci se trouve en racine du serveur.

Puis on insère la seconde image de taille normale, à un autre endroit du document, en nommant cette image defaut dans le panneau Propriétés.

Si vous ne voulez pas que cette image soit visible par défaut il vous suffit de la créer en gif ou en png transparent, dans votre éditeur d'images.

Ajout d'informations

Il peut être nécessaire d'ajouter des informations concernant notre image de taille réduite, comme sa taille ou l'attribut alt (permet d'afficher un texte alternatif en cas de non-affichage de l'image) par exemple, pour ce faire il faut passer en mode source et taper ce code à la main :

<img src="/images/tn_<?php echo $row_rsVideo['jaquette']; ?>" name="tn<?php echo $row_rsVideo['id_video']; ?>" id="tn<?php echo $row_rsVideo['id_video']; ?>" alt="<?php echo $row_rsVideo['titre']; ?>" width="100" height="137" />

Le champ id_video étant un champ numérique, l'utiliser pour l'attribut id ou name rend la page non conforme en XHTML, pour contourner le problème il suffit d'ajouter devant le champ un préfixe, ici "tn".

Permuter l'image

Le comportement Permuter l'image est accessible à partir de l'onglet Fenêtre > Comportements ou via le raccourci clavier Maj+F3, il faut d'abord sélectionner l'image de taille réduite avant de pouvoir l'utiliser.

On sélectionne image defaut, puis on décoche Précharger les images et par contre on coche Restaurer les images onMouseOut, cette fonction permettant de restaurer l'image initiale une fois que la souris a quitté l'image (événement onMouseOut).

Cliquer sur Parcourir nous permet de choisir la source des images sur lesquelles l'action va être appliqué.

On choisit le champ contenant le nom de l'image jaquette, on ajoute le chemin du dossier images dans l'URL, on clique sur OK.

Evénement onclick

Pour modifier le comportement avec l'événement onMouseOver par défaut à l'événement onClick, il faut supprimer l'événement onMouseOut ou le modifier pour onDoubleClick par exemple, puis modifier l'événement onMouseOver.

On applique ensuite la commande Apply N4 Return False Fix, ce qui ajoute une fonction JavaScript à notre comportement.

Région répétée

Si on veut afficher plusieurs images il nous faut faire une région répétée, qui lira les enregistrements présents dans la base de données en boucle, suivant le nombre d'enregistrements spécifiés à afficher.
Afin de garder le comportement JavaScript, on doit bien sûr sélectionner celui-ci en même temps que l'image afin de l'inclure dans la région répétée.

Vous pouvez accéder à cette fonction via la fenêtre Application > Comportements de serveur ou via le menu Insertion > Applications dynamique.

Puis on choisit le nombre d'enregistrements à afficher.

Préchargement des images

Il peut être utile de précharger les images, afin qu'il n'y ait pas de temps d'attente sur l'évémement onMouseOver, pour ce faire on doit combiner JavaScript et PHP/MySql.
Pourquoi ne pas utiliser le premier jeu d'enregistrement déjà créé ? Tout simplement parce que Dreamweaver ne gère pas plusieurs régions répétée du même jeu d'enregistrement dans le même document.

On passe en mode source dans la partie <head> du document et on tape ce code juste avant la balise </head> :

<?php
/* connection à MySql
$dbname = mysql_connect('nom_du_serveur_sql', 'votre_login', 'votre_password');
*/
  $dbname = mysql_connect('localhost', 'root', '');
     
// sélection de la base
  mysql_select_db('flashxpress', $dbname);
     
/* création de la requête
on limite le nombre d'enregistrement au même nombre que la région répétée (rsVideo) affichant les images
*/
  $query_rsPreload = 'SELECT id_video,jaquette FROM video LIMIT 4 ';
     
// envoi de la requete
  $rsPreload = mysql_query($query_rsPreload) or die('Erreur SQL !<br />'.$query_rsPreload.'<br />'.mysql_error());
     
// boucle pour lire chaque enregistrement
  while ($row_rsPreload = mysql_fetch_array($rsPreload)) {
         
// affichage du JavaScript
      echo '<script type="text/javascript">';
      echo "n"; // saut de ligne
      echo 'i'.$row_rsPreload['id_video'].' = new Image;'; // identifiant unique
      echo "n"; // saut de ligne
      echo 'i'.$row_rsPreload['id_video'].'.src = "/images/'.$row_rsPreload['jaquette'].'";'; // source de l'image avec le prefixe ton_
      echo "n"; // saut de ligne
      echo '</script>';
   }
// fermeture de la connection à MySql
  mysql_close();
?>

Le but est de donner un identifiant unique à chaque image (i suivi du N° de l'id_video) ainsi que le dossier source de l'image, ces images seront chargés avant le reste de la page, permettant la permutation des images de manière fluide.

Gardez à l'esprit que les images sont chargées avant l'affichage de la page, il faut donc limiter le nombre d'images totales et/ou les optimiser le plus possible, au risque de rendre la page très lourde à charger.