Il s'agit de générer automatiquement un code html, qui lorsque vous passez avec la souris sur une image, celle-ci change ou une autre apparaît. Il existe un plugin pour Gimp qui le génère à l'aide d'un script. Il est nécessaire que le module gimp-perl soit installé et pour un navigateur internet, que les javascript soient activés. Voici l'une des dernière version du script, téléchargeable ici .

Ce didacticiel est tiré de celui en anglais disponible sur http://libre.cyriacrea.net/roll/tut/

Installer le plugin « rollover »

Pour ce didacticiel, j'ai utilisé Gimp1.2 - il va de soit que si vous utilisez une version plus récente, vous devez remplacer « gimp1.2 » par votre version (ex: gimp1.3 ; gimp2.0 ...). C'est le même principe pour gimp1.2-perl .

Renommez rollover.txt en rollover. Puis en cliquant (bouton droit) sur le ficher, changez ses permissions en le rendant exécutable (l'icône du fichier change alors). Ouvrir une fenêtre console (xterm) et tapez :

$gimptool --install-bin /home/votre nom d'utilisateur/...

Normalement, le plugin est installé. En cas d'échec, le plus simple est de copier le fichier rollover dans :

/home/votre nom d'utilisateur/.gimp-1.2/plug-ins/

Le répertoire .gimp-1.2 est caché, vous devez faire un changement dans l'affichage de votre explorateur de fichier, pour rendre les fichiers cachés visibles. Le numéro 1.2 dépend de la version de Gimp, cela peut être 1.1 ou 1.3, etc ...

Cette installation est à faire pour chaque utilisateur (la première avec gimptool ne se fait qu'une fois).

voir même plutôt si vous pouvez être ROOT ou en mode super utilisateur :

/usr/lib/gimp/1.2/plug-ins/

(haut de page)

Installer gimp-perl

Si gimp-perl n'est pas déjà installé :

allez chercher le paquet (l'archive) dans un moteur de recherche, par exemple : www.google.com/linux/

Mais le plus simple est sous une distribution DEBIAN, en mode console et en SuperUtilisateur (su + mot de pass root) et en étant connecté à internet :

allez chercher le nom correcte du paquet sur www.debian.org (le plus simple est de chercher tous les paquets pour Gimp) puis tapez (au moment où j 'écris ces lignes, il s'agit de gimp 1.2)

apt-get install gimp1.2-perl (Entrée)

(haut de page)

Faire un rollover simple

Ouvrez GIMP, puis ouvrez l'image de test (lien vers l'image)

Utilisez l'outil lasso pour détourer le poisson, puis faites un Ctrl+C (copier)

Allez dans la boite de dialogue calques et créez un nouveau calque en le nommant :

survol poisson « poisson.html » _Over_

- survol poisson est un texte pour nommer le calque

- poisson.html est le nom du lien de référence

- _Over_ est la commande pour lancer le rollover

Retournez sur l'image et faire un Ctrl+V (coller), un calque apparaît - sélection flottante

Retournez sur l'image et cliquer (bouton gauche) sur la sélection, le poisson apparaît alors seul dans le calque survol poisson et la sélection disparaît.

Dans la boite de dialogue calques, cliquez sur le nouveau calque poisson

Cliquez sur l'image avec le bouton droit, un menu apparaît - allez dans image - couleur - inverser (pour avoir le poisson en négatif).

Puis cliquez de nouveau avec le bouton droit et dans le menu, allez dans filtres,Web, generate rollover

Choisissez le chemin où doivent être créés les fichiers, le nom du fichier de base ; utilisez le format d'image png , et les différents paramètres souhaités, puis cliquez sur Ok.

Le rollover se génère (une barre de progression apparaît) et c'est fini.

Dans le répertoire du rollover, un fichier poisson.html contient le script et l'image - le sous-répertoire img, contient les images crées pour le script.

Ouvrez Netscape et allez dans le répertoire choisi pour le rollover pour ouvrir le fichier html et vérifiez son fonctionnement. Si cela ne fonctionne pas, vérifiez que le navigateur accepte Java et Javascript nécessaires au fonctionnement du rollover.

Faire un rollover multiple

Il s'agit d'une image dont plusieurs zones sont réactives.

Voici l'image de base

commencez par créer un nouveau calque et nommez le surfer sur la lampe « lamp.html » _Over_

A noter que la mention entre guillemet (« lamp.html ») peut être remplacée par une adresse internet (« http://www.truc.com »).

Dans ce nouveau calque, dessinez comme bon vous semble

Ensuite, allez dans le menu Layers (clic droit sur l'image) et cherchez Alpha to selection :

Le dessin nouvellement créé est alors entouré de pointillés (il est sélectionné).

Double cliquez (gauche) sur le bouton de rognage,

pour accéder à sa boîte d'options, sur laquelle vous sélectionnez Current Layer only (les opérations de rognage ne concernent que le calque courant)

Ensuite, dans l'image, vous délimitez un cadre autours du dessin (1), puis dans le cadre de contrôle de l'outil rognage, vous sélectionnez From selection (2) pour que le cadre se resserre sur la sélection. Enfin, cliquez sur Crop (3) pour rogner la zone (un cadre en pointillés noir et jaune apparaît autours de la sélection).

Suivant le même principe, vous pouvez dessiner sur d'autres calques, ou faire des sélections (comme pour le premier exemple) mais sans oublier de faire Alpha to selection sans quoi toute l'image sera réactive !

Une fois ces opérations terminées, allez dans filtres,Web, generate rollover

Dans le cadre qui apparaît, définissez les différents paramètres en (1)

Sélectionnez le format PNG (2)

et validez (3)

Après quelques secondes, les différents fichiers sont près - voici le lien vers le dernier exemple.

Et voici le fichier Gimp qui m'a permis de le réaliser (il n'y a plus qu'à lancer le script).

Pour réutiliser ou insérez le résultat dans un texte, sur StarOffice, par exemple, sélectionnez la totalité du fichier html créé et copiez le tout dans votre fichier de travail. Virez le texte mais ne touchez pas à la borne (verte ou jaune). Vous pouvez ensuite copier le tout (les images superposées et la borne - très importante) où vous le désirez (tableau ... ).

Pour insérer les rollover multiples, il vaut mieux utiliser le « Composer » de Mozilla. Cet éditeur semble poser moins de problèmes (voir la rubrique Mozilla).

Pour rendre le lien actif à un lien propre (une fois le rollover réalisé, le lien renvois en boucle sur le rollover - poisson.html), double cliquez sur le bord inférieur de l'image. La souris représente alors des croix multidirectionnelles (et non une main, qui elle représente l'hyperlien). Une fenêtre apparaît, cliquez sur l'onglet hyperlien et entrez le chemin désiré, puis - Ok.