Les images interactives et leurs "bulles"

La notion d'images interactives est apparue dans le grand public à partir de Html 3.2, version qui intégrera une série de balises permettant une forme de projection topographique liée le plus souvent à la cartographie. Cette possibilité n'était jusqu'alors envisageable qu'en passant par les CGI et avait donc 2 inconvénients : elle nécessitait des talents de développeur (programmeur est le terme le plus fréquemment utilisé) pour l'écrire et ne pouvait fonctionner qu'en ligne, c'est-à-dire pendant une connexion sur un serveur. Encore fallait-il que ce serveur accepte les scripts CGI de ses abonnés ! Vous connaissez sans doute cette notion que la majorité des logiciels d'édition de pages nomment "mapping" et avez peut-être déjà utilisé le module dédié à cette pratique (il existe même de petits programmes spécifiquement destinés à ces réalisations) avec un tel logiciel. Il est évidemment plus facile de créer de telles zones réactives grâce à ce moyen mais elles ont leurs limites et leurs contraintes. L'utilisation de feuilles de style vous permettra d'aller au delà de ces limites et d'éviter ces contraintes.

Ici, vous tracerez vous-même les zones réactives en dimensionnant des calques MAIS en gardant la possibilité d'en modifier la présentation ET le positionnement grâce à la centralisation de leurs paramètres de base dans une feuille de style. Ceci est, vous devez maintenant le savoir, un des immenses avantages des FDS : le pouvoir de changer une présentation de plusieurs pages, d'une rubrique, voire d'un site entier rien qu'en manipulant quelques règles de style centralisées dans un seul et même fichier ! Cet avantage est d'autant plus marquant si la même image est utilisée sur plusieurs pages différentes, le contenu et la présentation étant dissociés grâce à l'utilisation des feuilles de style.

L'application présentée ici est directement dérivée de l'expérience de l'exposé précédent. Si vous avez bien suivi jusqu'à présent, vous en comprendrez facilement le cheminement et vous pourrez rapidement créer ce que beaucoup nomment "bulles de texte" (mais qu'ils devraient nommer "fenêtres") en y ajoutant l'interactivité.

En réalité, "fenêtre de texte" est, aussi, une expression impropre car, vous le verrez, on peut aller beaucoup plus loin.

Quelles sont les pages visées par cette technique ?

• Les cartes géographiques ou plans
• Les photos ou images que l'on désire détailler
• les lettres, mots ou portions de texte que l'on désire expliciter

Quels sont les outils nécessaires pour ces réalisations ?

• Les langages de base des pages dynamiques : Html, Css et JavaScript
• Un logiciel de retouches d'images
• Une bonne dose d'attention ... et de patience

Pourquoi ce dernier outil ? Tout simplement car il va faire appel au positionnement précis sur des images mais en créant généralement un nombre beaucoup plus important de calques.

Ce préambule étant digéré et bien compris (je l'espère ...), passons à la démonstration "sur site"

Attention ! Cette démonstration est réellement sur site puisqu'elle est empruntée à une (deux si vous poussez la curiosité à aller voir sa voisine) page d'un de mes sites ! Le lien ci-dessous vous fera donc sortir de la rubrique dans laquelle vous vous trouvez maintenant. La page sur laquelle vous attérirez comporte des liens réels qui, si vous les activez, vous mèneront à la suite du site, c'est-à-dire à une visite virtuelle du nord de la Bretagne.

Si vous ne faites que les survoler au moyen du curseur de la souris, vous pourrez apprécier le résultat de cette démonstration et il vous suffira ensuite d'activer le bouton



situé au bas de cette page pour revenir ici et passer à la suite de l'exposé.

Prêt ? ... Partez :


Démonstration