Exercice HTML : Rollovers et images multipart

Thème

Un "rollover" (aussi appelée "image survolée" ou "image réactive") est une image, insérée en-ligne dans une page Web, qui change d'aspect lorsque le curseur passe dessus. Cette technique, qui permet de rendre plus vivant le processus de navigation, est utilisée :

dans la réalisation de boutons interactifs
pour animer, en fonction de la position du curseur, les différentes parties d'une image (à travers la technique des images multipart)

La réalisation d'un rollover (qui n'a rien à voir avec la technique des GIF-animés) consiste simplement à créer 2 images de même dimension dont on fait alterner l'affichage, en fonction de la position du curseur, par des techniques JavaScript.

Pour fabriquer des textes réactifs, une alternative aux rollovers, très simple à mettre en oeuvre avec l'éditeur Macromedia Dreamweaver, consiste à faire créer automatiquement par ce logiciel des objets texte de type Flash (*.swf) avec le bouton [Insérer le texte Flash] : on peut ainsi choisir la police et taille du texte, sa couleur selon que le curseur survole le texte ou non, la couleur de fond, le lien associé au texte...

Remarque : pour réaliser des pages Web au graphisme très interactif, une alternative à la technique des images multipart composées de rollovers (relativement exigente en bande passante réseau car véhiculant un contenu purement raster) consiste à utiliser le format multimédia Flash (de Macromedia) qui amène en outre une dimension sonore. L'affichage d'animations Flash nécessite cependant la présence d'un plugin spécifique au niveau du browser.

Rollover en JavaScript

La technique du rollover ne fonctionnant correctement qu'à partir des versions de browser Netscape 3 et Internet Explorer 4, il est important de tester, par la fonction JavaScript suivante (à placer dans le bloc <HEAD>...</HEAD>), le type de browser pour ne pas générer d'erreur :

  <SCRIPT LANGUAGE="JavaScript">
  <!--
      function VersNavig(Netscape, Explorer) {
        if ((navigator.appVersion.substring(0,3) >= Netscape && navigator.appName == 'Netscape') ||      
            (navigator.appVersion.substring(0,3) >= Explorer && navigator.appName.substring(0,9) ==
                    'Microsoft'))
          return true;
        else
          return false;
      }
  //  -->
  </SCRIPT>

Le rollover proprement dit est ensuite défini et placé ainsi dans la page :

  <A HREF="URL activée par rollover"
      onMouseOver= "if (VersNavig(3.0,4.0)) nom.src='URL image 2' "
      onMouseOut=  "nom.src='URL image 1' " >
      <IMG NAME="nom" SRC="URL image 1" ALT="texte" BORDER=0></A>

Effet rollover en CSS

On illustre ci-dessous une technique s'approchant du rollover implémentée en CSS basée sur le changement d'opacité de l'image (selon que le curseur la survole ou non), technique présentant l'intérêt de ne pas nécessiter d'image alternative ! Pour un navigateur standard CSS, seule la propriété opacity est nécessaire. Le recours à un filtre (avec filter:alpha) n'est nécessaire que pour Internet Explorer jusqu'à la version 6.

<STYLE TYPE="text/css"> a.roll img { opacity: 1.0; filter:alpha(opacity=100); } a.roll:hover img { opacity: 0.4; filter:alpha(opacity= 40); } </STYLE> Bla bla bla bla <A HREF="111.html" CLASS="roll"><IMG border=0 SRC="nouveau.gif"></A> bla bla.
Bla bla bla bla bla bla.

Références

Ouvrages sur JavaScript et CSS
Documentation sur logiciels de manipulation d'images raster (PaintShop Pro, PhotoShop, GIMP...)

Exercice

Etape Solution

	Etape	Solution
1a	Rollover Réalisez le rollover ci-dessous : lorsque le curseur passe dessus, le texte "Génie Rural" doit s'illuminer d'un halo, et une info-bulle [Département de Génie Rural] doit apparaître lorsque l'on clique dessus, cela doit charger la home-page du site `dgrwww.epfl.ch` du Génie Rural	Code HTML de ce rollover : <A HREF="http://dgrwww.epfl.ch" onMouseOver= "if (VersNavig(3.0,4.0)) gr.src='gr_2.jpg'" onMouseOut= "gr.src='gr_1.jpg'"> <IMG NAME="gr" SRC="gr_1.jpg" ALT="Département de Génie Rural" BORDER=0> </A>
1b	Réalisation des images de ce rollover à l'aide de PainShop Pro : Création d'une nouvelle image de 200 x 50 pixels avec un fond noir et en vraies couleur (24 bits = 16 mio couleurs) Définition de la couleur active (foreground) et de la couleur d'arrière-plan (background) utilisée par les effets Introduire le texte "Génie Rural" dans l'image Sauvegarder cette première image en format JPEG sous le nom `gr_1.jpg` Pour réaliser le halo, appliquer p.ex. un effet relief au texte Sauvegarder cette seconde image en format JPEG sous le nom `gr_2.jpg` Tester que le rollover fonctionne !	Lancement de PainShop Pro, puis étapes suivantes : `File>New`, puis définir : Width = `200`, Height = `50`, Background color = `Black`, Image type = `16 mio colors`. La vraie couleur est nécessaire pour réaliser des effets ou appliquer des filtres dans les logiciels d'édition raster (réalisation des dégradés... Cliquer successivement sur les 2 rectangles au-dessous de la palette de couleur, et choisissez le `jaune` comme couleurs de foreground et de background Prendre l'outil `[Text]`, cliquer dans l'image, puis choisir p.ex. police `Arial Black` en `Gras 18 pts` et activer le "Text effect" "`Anti alias`", puis introduire le texte `Génie Rural` dans la zone "Enter text here", et cliquez sur `[OK]` `File>Save as` : sous "Enregistrer sous" choisir `JPEG (.jpg)`, dans "Nom du fichier" introduire `gr_1`, puis `[Enregistrer]` (Si le texte n'est plus sélectionné, prenez l'outil `[Magic Wand]` et cliquez dans le fond noir de l'image, puis `Sélection>Invert` et `Sélection>FLoat`) `Image>Effects>Chisel` et choisir Size = `10 pixels`, Mode `Transparent` et `[OK]` `File>Save as` : sous "Enregistrer sous" choisir `JPEG (.jpg)`, dans "Nom du fichier" introduire `gr_2`, puis `[Enregistrer]`
2	Image multipart Réalisez une nouvelle page HTML contenant 2 frames : dans le frame supérieur (frame de navigation) affiché avec une couleur de fond noire, faites apparaître les 3 rollovers ci-dessous. Utilisez la technique des images multipart : les 3 boutons sont assemblés par un tableau dont les attributs de bordures (`BORDER`, `CELLPADDING`, `CELLSPACING`) sont mis à `0` (afin que les différentes images assemblées donnent l'impression d'une image d'un seul tenant contenant plusieurs zones sensibles comme dans une imagemap). le fait de cliquer sur l'un des texte EPFL, Génie Rural ou Génie Civil doit provoquer l'affichage de la home-page correspondante dans le frame du bas	Structure de l'image multipart contenant les 3 rollovers (code HTML du frame du haut) : <HTML> <HEAD></HEAD> <BODY BGCOLOR="black"> <CENTER><TABLE BGCOLOR="black" BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR> <TD>...rollover EPFL...</TD> <TD>...rollover Génie Rural...</TD> </TR> <TR> <TD> </TD> <TD>...rollover Génie Civil...</TD> </TR> </TABLE></CENTER> </BODY> </HTML>

Rollover

Réalisez le rollover ci-dessous :

lorsque le curseur passe dessus, le texte "Génie Rural" doit s'illuminer d'un halo, et une info-bulle [Département de Génie Rural] doit apparaître
lorsque l'on clique dessus, cela doit charger la home-page du site dgrwww.epfl.ch du Génie Rural

Code HTML de ce rollover :

<A HREF="http://dgrwww.epfl.ch"
  onMouseOver= "if (VersNavig(3.0,4.0))
    gr.src='gr_2.jpg'"
  onMouseOut=  "gr.src='gr_1.jpg'">
    <IMG NAME="gr" SRC="gr_1.jpg"
	ALT="Département de Génie Rural"
	BORDER=0>
</A>

Réalisation des images de ce rollover à l'aide de PainShop Pro :

Création d'une nouvelle image de 200 x 50 pixels avec un fond noir et en vraies couleur (24 bits = 16 mio couleurs)
Définition de la couleur active (foreground) et de la couleur d'arrière-plan (background) utilisée par les effets
Introduire le texte "Génie Rural" dans l'image
Sauvegarder cette première image en format JPEG sous le nom gr_1.jpg
Pour réaliser le halo, appliquer p.ex. un effet relief au texte
Sauvegarder cette seconde image en format JPEG sous le nom gr_2.jpg

Tester que le rollover fonctionne !

Lancement de PainShop Pro, puis étapes suivantes :

File>New, puis définir : Width = 200, Height = 50, Background color = Black, Image type = 16 mio colors. La vraie couleur est nécessaire pour réaliser des effets ou appliquer des filtres dans les logiciels d'édition raster (réalisation des dégradés...
Cliquer successivement sur les 2 rectangles au-dessous de la palette de couleur, et choisissez le jaune comme couleurs de foreground et de background
Prendre l'outil [Text], cliquer dans l'image, puis choisir p.ex. police Arial Black en Gras 18 pts et activer le "Text effect" "Anti alias", puis introduire le texte Génie Rural dans la zone "Enter text here", et cliquez sur [OK]
File>Save as : sous "Enregistrer sous" choisir JPEG (*.jpg), dans "Nom du fichier" introduire gr_1, puis [Enregistrer]
(Si le texte n'est plus sélectionné, prenez l'outil [Magic Wand] et cliquez dans le fond noir de l'image, puis Sélection>Invert et Sélection>FLoat)
Image>Effects>Chisel et choisir Size = 10 pixels, Mode Transparent et [OK]
File>Save as : sous "Enregistrer sous" choisir JPEG (*.jpg), dans "Nom du fichier" introduire gr_2, puis [Enregistrer]

Image multipart

Réalisez une nouvelle page HTML contenant 2 frames :

dans le frame supérieur (frame de navigation) affiché avec une couleur de fond noire, faites apparaître les 3 rollovers ci-dessous. Utilisez la technique des images multipart : les 3 boutons sont assemblés par un tableau dont les attributs de bordures (BORDER, CELLPADDING, CELLSPACING) sont mis à 0 (afin que les différentes images assemblées donnent l'impression d'une image d'un seul tenant contenant plusieurs zones sensibles comme dans une imagemap).
le fait de cliquer sur l'un des texte EPFL, Génie Rural ou Génie Civil doit provoquer l'affichage de la home-page correspondante dans le frame du bas

Structure de l'image multipart contenant les 3 rollovers (code HTML du frame du haut) :

<HTML>
<HEAD></HEAD>
<BODY BGCOLOR="black">

<CENTER><TABLE BGCOLOR="black" BORDER=0
   CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>...rollover EPFL...</TD>
<TD>...rollover Génie Rural...</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
<TD>...rollover Génie Civil...</TD>
</TR>
</TABLE></CENTER>

</BODY>
</HTML>