Dreamweaver nous offre la possibilité d’afficher des images dynamiques, provenant d’une base de données, nous allons voir comment intervertir une image (effet de roll-over) de manière dynamique dans une page web.

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.

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.

Ajout d’informations

Il est nécessaire d’ajouter des informations concernant notre image, notamment l’attribut name, qui nous permet d’identifier l’image de manière unique, pour ensuite utiliser le comportement Permuter l’image.

On peut en profiter pour ajouter d’autres informations utiles, comme la taille de l’image 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 :
[cc lang="php" lines="2" width="600"]

[/cc]
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 (Windows), il faut d’abord sélectionner l’image avant de pouvoir l’utiliser.

Il faut décocher Précharger les images et par contre cocher 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.

On choisit le champ contenant le nom de l’image jaquette, on ajoute le chemin du dossier images dans l’URL suivit du préfixe de l’image, ici « ton_ » (pour thumbnail on), on clique sur OK.

Il nous faut modifier le comportement JavaScript pour que celui-ci fonctionne avec les images dynamiques, pour ce faire on passe en mode source :

[cc lang="php" lines="10" ]

onMouseOver= »MM_swapImage(‘tn’, »,’http://www.flashxpress.net/images/ton_’,0) »
onMouseOut= »MM_swapImgRestore() »>

name= »tn »
border= »0″ id= »tn »
alt= »"
width= »100″ height= »137″ />
[/cc]

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 dynamiques.

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>.

[cc lang="php" lines="36"]
:

/* 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 !
‘.$query_rsPreload.’
‘.mysql_error());

// boucle pour lire chaque enregistrement
while ($row_rsPreload = mysql_fetch_array($rsPreload)) {

// affichage du JavaScript
echo ‘‘;
}
// fermeture de la connection à MySql
mysql_close();
?>
[/cc]

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.