Objectif :
Ce tutoriel a pour objet de montrer comment modifier une image lorsque la souris survole cette image (roll-over) ou une partie de cette image (mapping).

Niveau :
Pourquoi "intermédiaire" plutôt que "débutant" ?
* parce que, pour mettre en oeuvre ce tutoriel, il faut avoir quelques notions d'HTML, en particulier il sera nécessaire d'agir directement sur le code HTML de la page
* parce qu'il faut également avoir une bonne pratique de son logiciel de retouche d'images.

Avertissement :
Si vous ne voyez aucun effet sur les images ci-dessous,
1. patientez quelques secondes, les images sont peut-être en train de se charger,
2. essayez avec un autre navigateur (Firefox),
3. si ça ne fonctionne toujours pas, et en particulier si le texte est incompréhensible, avec de drôles de symboles partout, reportez-vous à la version originale de ce tuto, publiée sur cette page de Logalisims, le site de Lili

          Bonne lecture !

La version originale de cette partie du tuto a été publiée sur cette page de Logalisims, le site de Lili

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

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 provoque 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 :

Pour effectuer un roll-over selon cette technique, il faut :
 1. en html: savoir coder un lien, et insérer une image
 2.  préparer les deux images qu'on veut utiliser :
   * ces deux images doivent avoir rigoureusement les même dimensions (largeur et hauteur), ici, par exemple, 400 px et 300 px.
   * j'appellerai "1re image" l'image de base, celle qui s'affiche si aucune action n'est effectuée avec la souris,
   et "2e image" l'image qui s'affiche lorsque la souris passe "sur" l'image
 3. connaître l'adresse de la page, c'est-à-dire le lien, qu'on veut ouvrir si l'internaute clique sur l'image
 4. recopier et adapter le code source ci-dessous dans la page html en cours d'écriture.

<A
        onmouseover="document.exemple2.src='(indiquez ici l'adresse de la 2e image)'"
        onmouseout="document.exemple2.src='(indiquez ici l'adresse de la 1re image)'"
        href="(indiquez ici le lien vers la page à atteindre)" target="_self">
        <img alt="Roll-over - exemple 2" title="Roll-over - exemple 2"
           src="(répétez ici l'adresse de la 1re image)"
           height="300" width="400" id="exemple2" border="0">
     </A>

Le spoiler ci-dessous contient des commentaires sur ce code

Spoiler:

Ca marche ? Alors, on continue dans le message suivant !

La version originale de cette partie du tuto a été publiée sur cette page de Logalisims, le site de Lili

Le "mapping" d'une image en HTML

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

Le spoiler ci-dessous contient des explications sur la recherche des points

Spoiler:

Pour effectuer un mapping selon cette technique, il faut :
1. savoir ce qu'on veut faire ! C'est-à-dire avoir une idée où, dans une seule image, on peut définir différentes zones dont chacune pointe vers un lien différent.
2. préparer la grande image, celle sur laquelle on veut définir les différentes zones : cela impose de savoir manipuler les fonctions correspondantes de son logiciel de retouche d'images
3. savoir repérer les coordonnées des points définissant chacune des zones
4. connaître l'adresse des pages, c'est-à-dire les liens, qui seront ouvertes si l'internaute clique sur une zone
5. recopier et adapter le code source ci-dessous dans la page HTML en cours d'écriture.

<map name="zonage3">
   <!-- zone 1 gothik-->
   <area shape="POLY" coords="55,80,340,5,400,220,110,295"
href="(indiquez ici le lien vers la page à atteindre pour la 1re mini-image)">
   <!-- zone 2 simpa-->
   <area shape="POLY" coords="482,2,770,80,713,295,425,215"
href="(indiquez ici le lien vers la page à atteindre pour la 2e mini-image)">
   <!-- zone 3 doureve-->
   <area shape="POLY" coords="110,302,398,378,340,595,52,517"
href="(indiquez ici le lien vers la page à atteindre pour la 3e mini-image)">
   <!-- zone 4 lothario-->
   <area shape="POLY" coords="424,378,710,300,770,517,480,595"
href="(indiquez ici le lien vers la page à atteindre pour la 4e mini-image)">
</map>
<img height="600" width="800" alt="montsimpa - 4 zones" title="montsimpa - 4 zones" src="(indiquez ici l'adresse de l'image)" useMap="#zonage3" border="0">

Le spoiler ci-dessous contient des commentaires sur ce code

Spoiler:

Ca marche ? Alors, on continue dans le message suivant !

La version originale de cette partie du tuto a été publiée sur cette page de Logalisims, le site de Lili

Fusionnons ces deux techniques !

Ce message contient 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 :
1. avoir bien compris et testé les exemples précédents, de roll-over et de mapping.
2. préparer à l'avance toutes les images qu'on doit utiliser
3. il n'est pas nécessaire de repérer à nouveau les coordonnées des points définissant chacune des zones, car on va réutiliser le repérage effectué à l'étape précédente "Mapping"
4. de même, on va réutiliser les adresses des pages, c'est-à-dire les liens, qui seront ouvertes si l'internaute clique sur une zone
5. par contre, il faut recopier et adapter le code source ci-dessous dans la page html en cours d'écriture.
Ce code est basé sur celui de l'exemple précédent, les ajouts nécessaires aux effets de roll-over sont indiqués en bleu

<map name="zonage4">
   <!-- zone 1 gothik-->
   <area
    onmouseover="document.exemple4.src='indiquez ici l'adresse de la 1re image (Gothik)'"
    onmouseout="document.exemple4.src='indiquez ici l'adresse de l'image noir et blanc'" 
    shape="POLY" coords="55,80,340,5,400,220,110,295"
href="adresse du 1er lien">
   <!-- zone 2 simpa-->
   <area
    onmouseover="document.exemple4.src='indiquez ici l'adresse de la 2e image (Simpa)'"
    onmouseout="document.exemple4.src='indiquez ici l'adresse de l'image noir et blanc'"  
    shape="POLY" coords="482,2,770,80,713,295,425,215"
href="adresse du 2e lien">
   <!-- zone 3 doureve-->
   <area
    onmouseover="document.exemple4.src='indiquez ici l'adresse de la 3e image (Doureve)'"
    onmouseout="document.exemple4.src='indiquez ici l'adresse de l'image noir et blanc'" 
    shape="POLY" coords="110,302,398,378,340,595,52,517"
href="adresse du 3e lien">
   <!-- zone 4 lothario-->
   <area
    onmouseover="document.exemple4 .src='indiquez ici l'adresse de la 4e image (Lothario)'"
    onmouseout="document.exemple4.src='indiquez ici l'adresse de l'image noir et blanc'"
    shape="POLY" coords="424,378,710,300,770,517,480,595"
href="adresse du 4e lien">
</map>
<img height="600" width="800" alt="montsimpa - 4 zones" title="montsimpa - 4 zones" src="indiquez ici l'adresse de la grande image" useMap="#zonage4" id="exemple4" border="0">

Le spoiler ci-dessous contient des commentaires sur ce code

Spoiler:

Avant de terminer, quelques compléments :
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 !

<IMG style="DISPLAY: none;" alt="" src="indiquez ici l'adresse de la 1re image à pré-charger">
<IMG style="DISPLAY: none;" alt="" src="indiquez ici l'adresse de la 2e  image à pré-charger">
<IMG style="DISPLAY: none;" alt="" src="indiquez ici l'adresse de la 3e  image à pré-charger">
etc.

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 dernier message de cette série.

4. 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" !

La version originale de cette partie du tuto a été publiée sur cette page de Logalisims, le site de Lili

>

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

Nous allons 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.
Le message suivant sera le dernier de cette sé sur le roll-over et le mapping.

La version originale de cette partie du tuto a été publiée sur cette page de Logalisims, le site de Lili

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. :scratch: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. En faisant passer la souris sur un personnage, 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 blanc 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 :
1. comme précédemment, avoir bien compris et testé les exemples précédents.
2. comme précédemment, préparer à l'avance toutes les images qu'on doit utiliser :
 pour cela, il faut savoir manipuler un logiciel graphique permettant d'utiliser des calques, et sauvegarder les petites images au format "gif", aux mêmes dimensions que la grande image, la plus grande partie de l'image sera transparente.
 J'utilise également une image "vide", de mêmes dimensions que l'image d'arrière-plan, pour les cas où il n'y a aucune petite image à superposer.
3. Attention, cette technique fonctionnera d'autant mieux avec des images "gif" de petite taille : si vos images sont très différentes les unes des autres, mieux vaut utiliser la technique précédente
4. les images au format png permettent également d'obtenir l'effet de transparence, ce format permet d'avoir des images de meilleure qualité que celles au format gif... mais, de ce fait, ces images pèsent plus lourd.
5. savoir repérer les coordonnées des points définissant chacune des zones, cf. étape précédente "Mapping"
6. il faut également définir l'image d'arrière-plan. Il y a plusieurs façons de faire, on pourra recopier et adapter le code source ci-dessous dans la page HTML en cours d'écriture.
La partie "zonage" est analogue à celle des exemples précédents, les ajouts nécessaires à la définition de l'arrière-plan sont indiqués en violet.

<div style="width:720px; height:540px; background-image:url(indiquer ici l'adresse de l'image d'arrière-plan);">
    <map name="zonage6" id="zonage6">
   <!-- Amina -->
    <area
    onmouseover="document.exemple6.src='indiquer ici l'adresse de la 1re image au format gif'"
    onmouseout="document.exemple6.src='indiquer ici l'adresse de l'image vide au format gif'"
    href="#" alt="Amina" shape="poly" coords="218,136,...,215,177" />
  <!-- Endora -->
    <area
    onmouseover="document.exemple6.src='indiquer ici l'adresse de la 2e image au format gif'"
    onmouseout="document.exemple6.src='indiquer ici l'adresse de l'image vide au format gif'"
    href="#" alt="Endora" shape="poly" coords="153,116...,152,135" />
  <!-- Saul   : meme principe -->
  <!-- Oulah : meme principe -->
  <!-- Junie : meme principe -->
  <!-- Pozsa : meme principe -->
    <area
    onmouseover="document.exemple6.src='indiquer ici l'adresse de la 6e image au format gif'"
    onmouseout="document.exemple6.src='indiquer ici l'adresse de l'image vide au format gif'"
    href="#" alt="Pozsa" shape="poly" coords="392,133,...,380,154" />
    </map>
    <img src="répéter ici l'adresse de l'image vide au format gif" alt="un diner en famille"  title="un diner en famille" width="720" height="540" border="0" usemap="#zonage6" id="exemple6" name="exemple6" />
</div>

Le spoiler ci-dessous contient des commentaires sur ce code

Spoiler:

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 !

J'avais déjà lu ce tuto sur le site de Lili, un grand merci à Frof de le mettre à disposition ici sur le forum qui commence à bien prendre forme et à regrouper pas mal de savoir-faire! Un énorme merci!

Je suis juste la bouche grande ouverte derrière mon écran!!!

Merci pour ce super tuto, je vais le lire avec la plus grande attention

:O C'est super de savoir tout ça

Merci !!

Sujet nettoyé (je pense ^^) et déplacé avec succès !
J'avais un peu peur, je ne savais pas faire

De rien Fu', fallait que je le fasse une première fois pour savoir ^^

Merci à Frof !

 
Merci à vous tous pour vos messages !

Et, comme je dis à la fin : "à vous de nous montrer vos exemples d'images réactives !"

La version originale de cette partie du tuto a été publiée sur cette page de Logalisims, le site de Lili

Complément sur le Roll-over – Double effet

La technique du roll-over permet également d'obtenir d'autres effets.
Jusqu'à présent, le principe consiste, lorsque la souris survole une image, à modifier cette image survolée.
Mais rien n'empêche de modifier une autre image.

Dans l'exemple ci-dessous, Vladimir, un riche senior de Montsimpa, s'approche de son télescope. Puisqu'il fait jour, ce ne sont certainement pas les étoiles qu'il s'apprête à admirer... A votre avis, comment sa voisine Brenda va-t-elle réagir ?

Si tout se passe comme prévu, lorsque la souris survole l'image de Vladimir, les deux images sont modifiées.

Pour effectuer un roll-over "double effet" selon cette technique, il faut :
1. comme précédemment, avoir testé et compris les premiers exemples de roll-over ci-dessus
2. préparer les différentes images qu'on veut utiliser :
* j'appellerai "1re image" celle qui montre Vladimir, il y a en fait deux images, l'image "de base", celle qui s'affiche si aucune action n'est effectuée avec la souris, et l'image "de remplacement", qui s'affiche lorsque la souris passe "sur" l'image de Vladimir.
* j'appellerai "2e image" celle qui montre Brenda, il y a là aussi une image "de base" et deux images "de remplacement"
3. recopier et adapter le code source ci-dessous dans la page html en cours d'écriture.

<!-- on place les deux images dans un tableau --!>
<table>
  <tr>
    <td>
<!-- la premiere image en haut a gauche --!>
    <A
   onmouseover="document.img01.src='(indiquez ici l'image de remplacement de la 1re image)';document.img02.src='(indiquez ici l'image de remplacement A de la 2e image)'"
   onmouseout="document.img01.src='(indiquez ici l'image de base de la 1re image)';document.img02.src='(indiquez ici l'image de base de la 2e image)'"
   href="(indiquez ici le lien vers la page à atteindre)" target="_self">
   <img alt="Roll-over - exemple 7 - image 1" title="Roll-over - exemple 7 - image 1"
      src="(répétez ici l'image de base de la 1re image)"
      height="300" width="400" id="img01" name="img01" border="0" />
</A>
    </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
<!-- la deuxieme image en bas a droite --!>
    <td>
      <A
      onmouseover="document.img02.src='(indiquez ici l'image de remplacement B de la 2e image)'"       onmouseout="document.img02.src='(indiquez ici l'image de base de la 2e image)'"
      href="(indiquez ici un lien vers la page à atteindre)" target="_self">
       <img title="Roll-over - exemple 7 - image 2" height="300" alt="Roll-over - exemple 7 - image 2"
        src="(répétez ici l'image de base de la 2e image)" width="400" border="0" id="img02" name="img02" />
    </td>
  </tr>
</table>

Le spoiler ci-dessous contient des commentaires sur ce code :

Spoiler:

Cette technique trouvera très vite ses limites si on veut l'employer dans des exemples similaires à celui ci-dessus.
En effet, pour manipuler des images animées, d'autres techniques seront mieux adaptées, par exemple : animation Flash, diaporama ou mini-vidéo.

Mais voici un exemple d'utilisation assez intéressant, adapté à la présentation d'une série de recolorations :

Passer la souris sur les vignettes pour modifier le sol de la cuisine de Flora

Lorsque la souris survole une des 5 petites images, la grande image est modifiée selon le même principe de roll-over : l'instruction onmouseover est utilisée, mais c'est la grande image, désignée par son identifiant, et non la petite image survolée, qui est modifiée.
Pour effectuer un roll-over "double effet" selon cette technique, il faut :
    1. comme précédemment, avoir testé et compris les premiers exemples de roll-over ci-dessus
    2. préparer les grandes images montrant les recolorations, ainsi qu'une vignette (petite image) pour chacune des grandes images
    3. recopier et adapter le code source ci-dessous dans la page html en cours d'écriture.

<!-- on place les images dans un tableau de 3 lignes par 5 colonnes (autant de colonnes que de vignettes) --!>
<table width="620" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
<!-- sur la 1re ligne, on place une seule cellule, pour contenir la grande image --!>
<!-- l'attribut colspan=5 indique qu'on fusionne les 5 cellules de la ligne en une seule --!>
    <td colspan="5" align="center">
      <img src="(indiquer ici l'adresse de la grande image par défaut)" alt="texte alternatif" title="info-bulle" width="600" height="450" id="img600" name="img600" />
    </td>
  </tr>
  <tr>
<!-- sur la 2e ligne, on place une seule cellule, pour contenir le texte explicatif --!>
    <td colspan="5" align="left">
Ce texte explique au visiteur de la page l'action qu'il doit effectuer pour pouvoir visualiser l'effet voulu, par exemple :
Passer la souris sur les vignettes pour modifier le sol de la cuisine de Flora
    </td>
  </tr>
<!-- sur la 3e ligne, on place 5 cellules, une pour chacune des 5 vignettes --!>
  <tr>
    <td align="center">
      <img src="(indiquer ici l'adresse de la vignette 1)" alt="1re vignette" name="vignette01" id="vignette01"
       onmouseover="document.img600.src='(indiquer ici l'adresse de la grande image 1)'" />
    </td>
    <td align="center">
      <img src="(indiquer ici l'adresse de la vignette 2)" alt="2e vignette" name="vignette02" id="vignette02"
       onmouseover="document.img600.src='(indiquer ici l'adresse de la grande image 2)'" />
    </td>
    <td align="center">
      <img src="(indiquer ici l'adresse de la vignette 3)" alt="3e vignette" name="vignette03" id="vignette03"
       onmouseover="document.img600.src='(indiquer ici l'adresse de la grande image 3)'" />
    </td>
    <td align="center">
      <img src="(indiquer ici l'adresse de la vignette 4)" alt="4e vignette" name="vignette04" id="vignette04"
       onmouseover="document.img600.src='(indiquer ici l'adresse de la grande image 4)'" />
    </td>
    <td align="center">
      <img src="(indiquer ici l'adresse de la vignette 5)" alt="5e vignette" name="vignette05" id="vignette05"
       onmouseover="document.img600.src='(indiquer ici l'adresse de la grande image 5)'" />
    </td>
  </tr>
</table>

Le spoiler ci-dessous contient des commentaires sur ce code :

Spoiler:

Enfin, je ne le répéterai jamais assez, plus il y a d'images à gérer, plus il faut être vigilant sur leur poids. Ceci afin de ne pas plomber la durée de chargement de la page, et de préserver une bonne fluidité des effets au survol de la souris. Ici, chacune des 5 grandes images pèsent entre 50 et 60 Ko, et chaque vignette pèse environ 2 Ko, soit un total de l'ordre de 300 Ko : c'est raisonnable.
Et voilà, à vous maintenant !

* * * * * *

Super Frof ce complément!!
Merci beaucoup

Whaouh, j'avais vu cette technique sur plusieurs sites qui présentes leurs créas sous plusieurs couleurs, je n'imaginais pas que ça prenait autant de temps et de concentration!

Merci Frof!

Je remonte le sujet car un certain nombre d'images ne s'affiche plus. Dans l'absolu, ce n'est pas indispensable pour comprendre le tuto mais c'est tout de même assez gênant...

Merci Sucrée, j'en suis consciente.

Je cherche d'ailleurs à résoudre ce soucis

Mais merci de ton intervention ^^

Bonjour,

ooops ! j'avais hébergé les images sur un emplacement qui n'existe plus (suite à changement de fournisseur d'accès Internet), c'est réparé !

En revanche, les effets de roll-over ne fonctionnent plus sur le forum, et là, je ne sais pas pourquoi...

Merci beaucoup Frof !
Par contre j'ai un soucis : la taille max des images est de 640 px, te serait-il possible de rectifier ça ?

Super, merci !

Camelya a écrit:

Merci beaucoup Frof !
Par contre j'ai un soucis : la taille max des images est de 640 px, te serait-il possible de rectifier ça ?

Bonjour Camelya,
possible de rectifier, oui, certainement... mais euh... les images qui excèdent 640 px sont celles sur lesquelles il y a du mapping, technique qui se base sur la position des points de l'image, et cela imposerait de refaire tous ces mappings.
Compte tenu que ce tuto a été publié il y a plus de deux ans, une dérogation est-elle possible ? S'il te plaît...

Peut-on mettre celle qui sont à plus de 640 px en spoiler ?

Merci beaucoup pour ce tuto