Images interactives et bulles : une technique de "zoom"

Voici une autre démonstration, qui répond à de nombreuses questions posées dans les groupes de discussion et autres forums : comment proposer, au départ d'une diapositive, l'affichage d'une photo dans une dimension plus confortable. Ici, nous poursuivons la même optique qui préside à l'origine de l'exposé que vous suivez : l'interactivité de zones sur une image. Nous allons toutefois pousser cette logique un peu plus loin.
La réalisation en sera légèrement plus exigeante car elle va faire appel à une autre petite astuce : la création de zones dites transparentes. N'abandonnez pas ici : cela reste largement à la portée de tous, vous allez le constater !

Promenez le curseur de votre souris sur cette photo :

Le Petit-Bé et son fort

jamais terminé et désormais à péage

Ile de Cézembre

une plage accessible aux plaisanciers

Le Grand-Bé où repose Chateaubriand

Fort de La Conchée

... un peu loin, n'est-ce pas !

Il y a, comme signalé ci-dessus, une astuce supplémentaire (eh oui, encore une ... !) pour obtenir ce résultat : l'utilisation d'images "transparentes".

En effet, un calque n'est pas un objet à proprement parler mais une sorte de contenant. Tant qu'il ne contient pas de ... contenu (ben oui, il faut parfois se répéter pour être clair), il ne peut réagir sous l'effet d'une action quelconque, telle une commande "onmouseover", par exemple. Il faut donc le "remplir", tout bêtement ... Le tout est de savoir avec quoi ! Certains petits malins vont jusqu'à affirmer (toujours dans certains forums ou groupes de discussion) que la seule solution est de découper les images comme un puzzle puis de les réassembler et de rendre chaque morceau sensible au moyen d'un lien. Cela me paraît plutôt hasardeux mais surtout bien fastidieux. D'autres pourraient être tentés (mais dans ce cas, on peut les pardonner : ils restent dans les normes acceptables et respectent le bon vieux Html) d'utiliser des espaces (qui s'écrivent   en code source) pour effectuer ce remplissage.
Il est préférable et bien plus efficace de créer des "objets" de remplissage !

Rassurez-vous, il n'y a rien de bien difficile à à créer ces objets : tout bon logiciel de retouches vous le permettra sans risque d'erreur. Il suffira de créer des fonds transparents aux dimensions voulues et de les compresser au maximum. Comment les utiliser et où les placer ? Simplement à la place du lien "texte" qui a été utilisé dans la démonstration précédente, en les installant dans le calque.

La syntaxe sera la suivante :

Vous l'aurez sans doute compris : le premier calque contient l'image transparente aux dimensions de la zone interactive et le second comportera la bulle de texte et/ou d'image. Créez autant de transparents que de calques à insérer, sauf si les zones réactives sont de mêmes dimensions.
Enfin, n'oubliez pas d'insérer le <br> entre commentaire et image sinon ils s'aligneront sur la largeur !

Dernière démonstration d'utilisation d'images interactives ... mais sans utiliser d'image mais du texte : soit des mots, soit des expressions transformées en liens invisibles. Ne soyez pas surpris : vous savez en effet maintenant que les feuilles de style permettent de modifier l'aspect des liens ..., non !? Il vous suffit dès lors de les créer tout en leur donnant un aspect différent de l'ensemble du texte et en signalant au lecteur que "le texte affiché en vert" (par exemple) est sensible au passage du curseur. Essayez : passez le vôtre sur les mots affichés dans cette couleur !

Vu ? Intéressant aussi ... non !?

Et très simple à réaliser car il suffit ici d'utiliser le même JavaScript que précédemment et de préparer des calques à positionner aux endroits voulus, comportant un texte et/ou une image.

Il reste toutefois un détail qui risque, si vous l'omettez, de gâcher toutes vos tentatives pour passer pour un "Webmestre" de talent : si le visiteur active le lien fictif (indispensable pour produire cet évènement) ... toute la page sera remontée ! Bon, comme vous êtes fidèle lecteur (vrai ou pas !?), je vous livre une dernière astuce pour éviter ce désagrément. Il vous suffit d'ajouter l'instruction onclick="return false" dans le lien, juste après l'instruction onmouseout="efface('com1')".

Ouf, votre honneur est sauf !

Aïe ! J'ai failli vous quitter en oubliant de vous dévoiler l'astuce promise à propos de la lourdeur des images ... Voici : vous aurez sans doute compris que celles-ci sont automatiquement chargées avec la page appelée, quoique réglées en {visibility:hidden}, de là le temps de téléchargement requis. Si celui-ci risque d'être trop long, prévoyez une autre page précédant celle-ci, où le visiteur devra obligatoirement passer avant d'accéder à l'image interactive. Faites en sorte qu'elle soit légère (ne comportant que du texte par exemple) et installez-y l'appel de tout ou partie des images hidden destinées à la suivante ! Elles s'inscriront automatiquement dans le dossier de fichiers temporaires du visiteur, à son insu ... Pour ce faire, allez donc fouiller dans la rubrique "JavaScript et Html" : vous y trouverez un petit script de préchargement ou écrivez les balises de ces images dans cette page relais en leur donnant des dimensions de 1 pixel. Elles ne seront alors pas visibles ... mais s'afficheront très rapidement à l'endroit voulu, c'est-à-dire à la page suivante. Petit bémol à cette tentative d'accélération : si le visiteur atterrit directement sur l'image interactive (sans passer par la "case départ") référencée par un moteur ou un annuaire, cette belle astuce tombera malheureusement à l'eau. Pas de panique toutefois : les "bulles" s'afficheront tout de même ... après leur téléchargement.

Convaincu ? Lancez-vous alors !