Images interactives et bulles : les explications

Démonstration intéressante, non !? Elle vous aura permis de vérifier que l'interactivité ne se limite pas à l'affichage de texte MAIS aussi d'images. Cela ouvre bien des horizons ...

Avertissement : Il ne faut pas perdre de vue un élément important, inhérent aux lenteurs de téléchargement des pages via le W.W.W. : un trop grand nombre d'images et donc un "poids" important risquent de faire fuir le visiteur ! Cette démonstration (et donc son utilisation pour vos propres pages) n'est acceptable que si le nombre d'images reste dans des limites raisonnables. La carte géographique et les évènements qu'elle génère dans la démonstration que vous venez de quitter est à la limite de ce raisonnable : 81602 octets, soit près de 80 Ko ! Elle comporte en effet non seulement son propre poids mais aussi les 13 diapositives, la feuille de style, le JavaScript et les 3 boutons de liens. Il est toutefois possible, grâce à une astuce que vous verrez plus loin, de remédier (dans certains cas) à cet inconvénient.

Voyons d'abord la structure de la page dans laquelle créer un tel évènement et les balises à insérer. Une fois n'est pas coutume, je vous mène par la main, comme si vous débutiez, et vous livre ci-dessous toutes les balises utilisées :

Le div à 760px permet de centrer la page pour des résolutions d'écran supérieures à 800x600.

Les réglages en bleu sont destinés au positionnement des liens : réglez en fonction de vos besoins.

Les réglages en vert sont destinés au positionnement des bulles : à vous de les placer où elles doivent apparaître.

Le X est un choix arbitraire de lien : il peut être remplacé par un mot, un texte ou un bouton.

Dans ce dernier cas, vous aurez compris qu'une simple lettre d'alphabet ou un lien de texte sera plus "léger" qu'un bouton mais aura également un avantage supplémentaire : la possibilité de le régler, à son tour grâce à des styles et permettre ainsi un changement de couleur lors du survol du curseur. Le bouton peut aussi changer d'aspect mais à la condition d'utiliser la technique du "rollover" et donc d'alourdir encore davantage le poids final de la page par une écriture plus longue dans chaque ligne de lien.

Astuce : pour utiliser une ou plusieurs lettres en guise de lien : adoptez les "entités".
Ce nom recouvre, en jargon de concepteur ou de développeur, l'usage de codes pour écrire des signes ou des lettres qui n'existeraient pas sur vos claviers. Selon la langue utilisée, les claviers sont forcément différents ! Mais le Web se voudrait universel ... et il a donc fallu tenter une standardisation de lecture de ces signes "venus d'ailleurs". Cette volonté s'est traduite par l'élaboration d'une norme : ISO-8859. En ajoutant une série de lettres utilisées par des langues telles le Grec, l'Arabe, le Cyrillique, l'Hébreu, etc. elle permet, grâce à ces entités, de les écrire avec tous (ou presque !) les claviers. Leur écriture est simple : elle comporte les deux signes &# (et suivi de dièse), d'un nombre et se ferme par ; (point-virgule) à écrire, évidemment, en code source.

Vous voulez quelques exemples ? En voici :

Vous n'aurez que l'embarras du choix. Pour rappel, les nombres de 1 à 127 correspondent aux claviers latins utilisés dans les pays francophones. Certains signes en sont parfois absents et la norme ISO-8859 (comportant actuellement 9 extensions) peut venir au secours de claviers parfois fantaisistes. Il est naturellement tentant d'employer d'autres polices de caractères représentant non plus des lettres mais des signes, telle "Wingdings" ou "Webdings". Ce serait une erreur car rien ne garantit que votre futur lecteur utilisera un navigateur capable de les lire ...
Vous préférez un bouton clignotant, comme celui de la démonstration ? Soit. Puisqu'il me reste de l'espace sur cette page, voici 3 ".gif" animés transparents : ils peuvent donc être utilisés sur n'importe quel fond de page. Copiez-les !

Autre astuce : vous avez remarqué que les calques destinés à contenir texte et/ou image ne sont pas dimensionnés et ne contiennent pas les règles de base. Cela permet de limiter les lignes de code : d'une part, le dimensionnement n'est pas nécessaire et évite des lignes de code surnuméraires si chaque calque est différent ; d'autre part, ces règles sont écrites dans la feuille externe afin d'éviter la répétitivité dans la page. Une fois de plus, il s'agit de limiter l'écriture autant que faire se peut. Encore faut-il que l'affichage soit correct ! Pour cela et afin d'éviter que le texte "colle" aux bords des calques (sans laisser de marge), il suffit d'installer ces règles de style dans une feuille externe, de la manière suivante :

... la propriété padding:10px étant destinée à laisser une marge de 10 pixels autour du texte ou de l'image. Réglez en fonction de vos besoins. De plus, choisissez les couleurs en fonction de vos propres goûts. N'oubliez pas non plus d'ajouter les propriétés déterminant les types de police, leur taille et leur couleur !

Attendez ! ne partez pas maintenant : passez en page suivante, ce n'est pas fini !