Faire son site et le publier

Kompozer et CSS

Mise en forme avec CSS : info-bulle et zone cliquable avec imageMap de Gimp


Avec The Gimp, logiciel de traitement d'images libre et gratuit, il est possible de maper une image, c'est-à-dire, définir des zones qui seront réactives  au comportement de la souris.
Sur la page Web, le survol de chaque zone par la souris peut permettre d'afficher une info-bulle et un clic sur la zone permet, grâce à un lien défini dans Gimp, d'afficher une fenêtre contenant une image ou de renvoyer vers une page Web ou encore vers une ancre de la page en cours.
Dans notre exemple, nous avons choisi, pour plus de simplicité, que le clic ouvre une image.

Dans l'explorateur Windows

Mettre toutes les images dans le même dossier : l'image de fond sur laquelle nous allons définir 5 zones ainsi que les 5 images qui seront affichées par clic sur chaque zone. (le chemin vers les images sera ainsi plus facile)

Dans Gimp : réalisation de l'image cliquable

Menu Filtre / Web / image cliquable

Interface Gimp de création d'image cliquable

Récupération du code HTML

Dans Kompozer : Menu Insertion / Code HTML

Explications du code

Le code est composé de différentes balises :
code
Sur cette image nous voyons le début du code jusqu'au premier lien "area shape".Haut de page
Jos Argaud - Mise à jour 21/01/2009  Pour m'écrire  Document made with KompoZer  D'après le tuto infetech.com