"Roll-over" et mapping

En parcourant nos sites favoris, nous avons tous déjà vu des images qui sont modifiées lorsque la souris passe dessus.

Comme celle-ci par exemple. En fait, il y a deux images, et le passage de la souris sur l'image affiche l'image 2 (les sœurs Caliente) au lieu de l'image 1 (la famille Hasseck).

Le changement d'image au survol de la souris permet d'attirer l'attention de l'internaute. Le plus souvent, en cliquant sur l'image, on provoquera l'ouverture d'une nouvelle page. Ce système est particulièrement intéressant lorsque les deux images sont proches l'une de l'autre, donnant l'illusion que c'est le mouvement de la souris qui modifie l'image, comme dans l'exemple ci-dessous :

Masquer les commentaires détaillés

Voici les commentaires concernant ce code :

l'instruction est de type <A><img></A>, il s'agit d'un lien avec une image
pour que le programme puisse identifier une image, on donne un nom à cette image, ici, le nom est "exemple2", qu'on retrouve trois fois dans le code.

Attention ! si on veut utiliser plusieurs fois le principe du roll-over sur plusieurs images de la même page, un simple copier-coller ne suffira pas, car toutes les images auraient le même identifiant. Il faut respecter les principes suivants :
* le contenu de l'attribut "id" doit être différent pour chaque image : ici, j'ai utilisé "exemple1" pour la 1re image, où on voit les soeurs Caliente, et "exemple2" pour la 2e image, où on voit Brenda Hasseck faire son lit.
* je répète : pour un même roll-over, à l'intérieur des balises <a> et </a>, le nom de l'image doit être identique pour ses trois utilisations, c'est-à-dire: dans "onmouseover", dans "onmouseout" et dans l'attribut "id" de la balise <img>
l'attribut "onmouseover" contient l'adresse de l'image à afficher quand la souris survole l'image (ici, la 2e image), attention à la syntaxe, il y a d'abord un guillemet double, puis document.exemple2.src, où exemple2 est le nom de l'image, puis un guillemet simple, puis l'adresse de l'image, enfin on ferme le guillemet simple, puis le guillemet double
l'attribut "onmouseout" contient l'adresse de l'image à afficher quand la souris quitte l'image (ici, la 1re image), la syntaxe est identique à celle de "onmouseover"
Autres attributs de l'instruction <A> :
* l'attribut "href" contient un lien vers la page à ouvrir si l'internaute clique sur l'image
* l'attribut "target" permet de préciser si on veut que ce lien s'ouvre ou non dans une nouvelle fenêtre du navigateur : ces deux attributs sont souvent utilisés avec l'instruction <A>
l'instruction <img> contient l'adresse de la 1re image, ainsi que l'attribut "id" fournissant le nom de l'image, nom qui sera repris dans les attributs "onmouseover" et "onmouseout" : c'est cette image qui est affichée par défaut, avant que l'internaute ne promène la souris sur la page.
Les propriétés alt, title, height et width contiennent respectivement :
* alt : texte de remplacement à afficher en cas de problème d'affichage,
* title : contenu de l'info-bulle (si ça ne vous semble pas très clair, faites un essai !)
* height : hauteur de l'image en pixels
* width : largeur de l'image en pixels
Ces propriétés devront être adaptées pour correspondre à celles de votre propre image.

Masquer les commentaires détaillés

Le "mapping"

Le "mapping" consiste à définir des zones dans une même image afin que chaque zone puisse diriger l'internaute vers une page différente.
Cette technique est utilisée par exemple pour réaliser des menus graphiques, ou des cartes de géographie.

Prenons un exemple: imaginons que nous voulions écrire une histoire ayant pour principaux protagonistes les membres des familles de Montsimpa, et que nous désirions que l'accès aux différentes familles se fasse graphiquement à partir d'une même grande image. Cette grande image est un montage où on reconnaît quatre des principales familles de ce quartier :

Sur cette grande image, on définit quatre zones, une zone pour chacune des mini-images noir et blanc correspondant chacune à une famille.

L'effet souhaité est que, si on clique à l'intérieur d'une de ces 4 zones, on soit dirigé vers un lien différent, décrivant – très succinctement !– l'histoire de la famille choisie.
Amusez-vous à cliquer sur chaque zone pour voir ce que cela donne !

Pour que le navigateur puisse repérer les zones, il faut lui indiquer dans le code les coordonnées des points de chacune de ces zones de la grande image : ceux qui travaillent avec Dreamweaver sont chanceux, car le repérage des zones de l'image se fait "tout seul", grâce à la fonction "zone réactive", cf. en bas de la copie d'écran ci-dessous.

Masquer les explications

Quelques explications sur la façon de déterminer les coordonnées des points sur Paint, logiciel de graphisme "basique" qui est livré avec Windows, on le trouve dans Menu Démarrer / Tous les programmes / Accessoires :

on ouvre l'image dans Paint
on place le curseur sur le point en haut à gauche de la zone, et on lit ses coordonnées (entourées en vert) sur la barre d'état en bas de la fenêtre de travail de Paint

(Cliquer sur l'image pour voir une petite animation s'ouvrir dans une autre fenêtre)
On procède de même pour chacun des points qui délimitent la zone, et on obtient les valeurs suivantes :
Premier point : 55,80
Deuxième point : 340,5
Troisième point : 400,220
Quatrième point : 110,295

Le principe reste identique si la mini-image a une forme plus compliquée, qui nécessite plus de 4 points pour être définie.
On procède de la même façon pour déterminer les points de la zone 2, de la zone 3, et de la zone 4.
Compléments:
* si les zones ont des contours compliqués, comportant un nombre important de points, il faudra s'aider d'un logiciel, comme geohtml, qu'on peut télécharger sur cette page.
* avant de déterminer les coordonnées des points de chaque zone, il faut que les dimensions de la grande image soient les dimensions définitives qu'elle aura sur la page html. Sinon, le zonage risque d'être imprévisible !
* pour en savoir plus sur le mapping en HTML, se reporter à son cours HTML favori, par exemple, sur cette page.

Masquer les explications

Masquer les commentaires détaillés

Voici les commentaires concernant ce code :

La première ligne contient la balise <map> elle-même, avec un attribut "name" qui permet de faire le lien avec l'attribut "usemap" de la balise <img> contenant la grande image sur laquelle on définit les différentes zones.
Remarque : il faut faire figurer un caractère # dans l'attribut "usemap" de la balise <img>, alors qu'il n'en faut pas dans l'attribut "name" de la balise <map>.
Les caracères écrits en vert, précédés de la séquence , sont des commentaires facultatifs destinés à faciliter la relecture du code
A l'intérieur de la balise <map>, on définit une balise <area> pour chacune des zones qu'on veut définir sur la grande image.
Cette balise contient elle-même :
* un attribut "shape", qui correspond à la forme de la zone qu'on a définie, ici le contenu "POLY" indique que la zone est de forme polygonale, c'est-à-dire que cette forme se définit par une succession de segments rectilignes.
* un attribut "coords", qui contient la liste des fameuses coordonnées des points définissant la zone
* un attribut "href" qui contient l'adresse de la page qui s'ouvrira si l'internaute clique dans la zone choisie.
Dans l'exemple ci-dessus, les quatre liens pointaient sur quatre emplacements différents de la même page "page03.html".
la balise <img> comporte une seule nouveauté par rapport à ce que nous avons déjà vu, c'est-à-dire l'attribut "usemap".

Masquer les commentaires détaillés

Fusionnons ces deux techniques !

Voici la partie principale de ce tutoriel : nous allons combiner le mapping et le roll-over. De cette façon, quand la souris survolera une des zones définies dans la grande image, on aura l'effet visuel du roll-over, mais avec une image différente pour chacune des zones.

Pour cela, conservons notre grande image de fond de l'exemple précédent, où les familles apparaissent en noir et blanc, et préparons une nouvelle image pour chacune des quatre zones, où l'image de la famille correspondant à la zone sera la seule à être en couleur, comme ceci :

Voici le résultat, amusez-vous à promener la souris sur l'image ci-dessous, pour vous rendre compte de ce qui se passe...

Pour effectuer un effet combiné de mapping et de roll-over selon cette technique, il faut :

Masquer les commentaires détaillés

Voici les commentaires concernant ce code:

la première ligne contient la balise <map> elle-même, avec un attribut "name" qui permet de faire le lien avec l'attribut "usemap" de la balise <img>.
La balise <img> contient la grande image sur laquelle on a défini les différentes zones.
On donne un nom différent "zonage4" à notre map, pour ne pas confondre avec le nom "zonage3" utilisé pour le mapping de l'exemple précédent
dans chaque balise "area", on ajoute les deux attributs "onmouseover" et "onmouseout", comme on a fait dans le tout premier exemple "Roll-over".
Pour la 1re zone, celle de la famille Gothik, l'attribut "onmouseover" contient l'adresse de l'image à afficher quand la souris survole l'image de la zone correspondant à la famille Gothik, l'attribut "onmouseout" contient l'adresse de la grande image de base, qui se réaffichera quand la souris quitte la zone correspondant à la famille Gothik.
Attention à la syntaxe, utilisant à la fois les guillemets doubles et les guillemets simples.
On procède de la même façon pour les autres zones.
pour faire le lien entre les différentes images, on doit leur donner un nom, ici "exemple4", qu'on retrouve dans chaque attribut "onmouseover" et "onmouseout", ainsi que dans l'attribut "id" de la balise <img>.

Masquer les commentaires détaillés

1. Les effets rendent mieux si les images sont chargées préalablement. Pour effectuer simplement ce "pre-loading", on peut ajouter, au début de la page html, des balises IMG fictives contenant l'adresse des images, en incorporant la mention: style="DISPLAY: none". Ainsi, les images seront chargées en début de page sans qu'on les voie, et seront prêtes à être affichées, sans délai de chargement, au moment où l'effet roll-over sera sollicité. Mais cette astuce ne fonctionne malheureusement pas avec tous les navigateurs, il existe d'autres techniques, en particulier Dreamweaver propose une fonction de pré-chargement en Javascript, mais ça devient un peu compliqué pour moi, donc cela dépasse le cadre de ce tuto !

2. Il faut que les différentes images soient exactement superposables, sinon, on aura l'impression que l'image "saute" lorsqu'on passe la souris dessus. Dans les Sims, je suggère d'utiliser les positions de caméra :
* on repère l'emplacement d'où on veut prendre les images
* on enregistre cette position de caméra avec CTRL+9 (par exemple)
* pour vérifier que ça a marché, on bouge un peu l'angle de vue et on appuie sur 9, l'angle de vue doit se placer sur la position mémorisée
* ensuite on prend la photo de la 1re image avec la touche C
* on va chercher le sim qui va être utilisé pour la 2e image, on le place dans le bon décor, et on appuie à nouveau sur 9 pour que le décor soit cadré exactement de la même façon que pour la 1re image, et hop ! touche C, c'est dans la boîte !
* et ainsi de suite...

3. Quelques conseils sur le poids des images, c'est-à-dire leur taille en Ko
* utiliser des images de taille raisonnable, l'exemple en 800x600 utilisé ici est déjà limite
* garder présent à l'esprit que, même si on ne voit qu'une seule image à l'écran, le navigateur manipule autant d'images qu'on a défini de zones réactives. Chacune de ces images a un poids sensiblement équivalent. Pour que les visiteurs puissent profiter d'effets graphiques fluides, les temps de chargement doivent être aussi réduits que possible : je suggère de ne pas dépasser un poids total de 500 Ko à 1 Mo, autrement dit environ 6 zones réactives pour des images de 80 Ko, ou 12 zones réactives avec des images de 40 Ko, etc.
* ce problème de réduction de temps de chargement m'a donné une idée, qui est détaillée dans le paragraphe ci-dessous.

3. Pour que ces effets fonctionnent convenablement, vous devrez probablement autoriser votre navigateur à accepter les contrôles ActiveX et les scripts, en suivant les instructions écrites dans une barre en haut de la fenêtre principale de l'écran du navigateur.

Voilà, c'est presque fini ! On continue par une récréation : "La garde-robe d'Aimée" !

Récréation : la garde-robe d'Aimée

On peut utiliser cette technique pour modifier les habits d'un Sim ou d'une Simsette, en fonction du survol de la souris sur l'icône correspondant au type de vêtements (décontracté, sur son 31, maillot de bain, pyjama, etc.)
Cet exemple, "la garde-robe d'Aimée", a été réalisé avec le superbe décor CAS06 de Mfo, qu'on peut télécharger sur cette page.

Le principe consiste à promener la souris sur les icônes. Pour relire la légende (le texte en bleu), il faut faire glisser la souris sur le personnage d'Aimée.

Remarque: ici, on n'a pas défini de lien pour chacune des zones réactives. La mention "href=adresse_du_lien.html" est dans ce cas remplacée par "nohref".

Après la récréation, un petit exercice : étudier le code source de cet exemple en cliquant avec le bouton droit et choisir "Afficher la source" (avec Internet Explorer) ou "Code source de la page" (avec Firefox), et chercher "exemple5"... Eh oui, après la récré, il y a toujours un exercice !
Normalement, vous y verrez des propriétés "title", qui permettent d'afficher une info-bulle différente pour chacune des zones réactives.

Pour terminer, une dernière idée : utiliser un arrière-plan

Dans la plupart des cas, toutes les images utilisées sont semblables, et on obtient l'effet en modifiant des zones assez restreintes de l'image.
D'où l'idée d'utiliser un arrière-plan identique, sur lequel on superposera les images contenant les détails à ajouter.

Dans l'exemple ci-dessous, l'image de base contient une famille en train de dîner, et en faisant passer la souris sur les personnages, on affiche le nom de ce personnage.

L'arrière-plan contient l'image de base, qui pèse environ 90 Ko, et pour les cartouches avec les noms des personnages, on utilise 6 toutes petites images "gif", qui pèse chacune environ 3 Ko : le poids total des images est donc d'environ 110 Ko, au lieu de 630 Ko si on avait utilisé la technique précédente.

Voici l'une des petites images "gif" utilisées (on voit le fond hachuré de la page à travers, c'est à cause de la transparence, et j'ai ajouté une bordure pour qu'on puisse voir l'encombrement réel de l'image) :

Pour effectuer un effet combiné de mapping et de roll-over selon cette technique de l'arrière-plan, il faut :

Masquer les commentaires détaillés

Voici les commentaires concernant ce code:

la première ligne contient une balise <div>, c'est dans cette balise qu'on indique l'image d'arrière plan, ainsi que les propriétés height et width qui doivent correspondre rigoureusement à celles de l'image elle-même.
J'ai indiqué ces propriétés ainsi, afin qu'elles soient visibles au même endroit que la balise <div>, mais en toute rigueur, il serait préférable d'utiliser une syntaxe de type <div id="roll-over-6">, et de définir, dans le fichier CSS associé à la page, la classe #roll-over-6 de la façon suivante :
#roll-over-6 {width:720px; height:540px; background-image:url(indiquer ici l'adresse de l'image d'arrière-plan);}
les lignes suivantes contiennent la balise <map>, que nous connaissons bien maintenant.
La principale différence avec les exemples précédents, c'est que les adresses d'image sont ici au format gif, afin de bénéficier de la transparence.
Ici non plus, on n'a pas indiqué de lien dans l'attribut href, n'hésitez pas à adapter en fonction de vos besoins.
La balise <img> contient une image vide, mais elle permet de faire le lien avec le zonage de la balise map, et de définir l'identifiant "exemple6" utilisé par les instructions onmouseover et onmouseout. Indiquer également les dimensions exactes de l'image.
et on n'oublie pas de fermer la balise </div> à la fin du paragraphe

Masquer les commentaires détaillés

Un exemple de cette technique a été utilisé par Lili sur la page de présentation de son quartier "Vallée des Souhaits" pour accéder à ses différentes familles. Je vous laisse vous y promener, puis étudier le code source, vous pourrez y constater quelques différences avec ce qui est présenté ici.

Voilà, cette fois-ci, c'est fini, amusez-vous et montrez-nous vos exemples d'images réactives !

Le "roll-over" (ou image réactive au survol de la souris)

Premiers exemples de "roll-over"

Le "mapping"

Fusionnons ces deux techniques !

Récréation : la garde-robe d'Aimée

Pour terminer, une dernière idée : utiliser un arrière-plan