Inkscape efficace Fichier PDF - e-nautia

Créer de l’interactivité graphiqueEn un sens, les événements déclencheurs d’animation constituent un débutd’interactivité. Mais s’ils sont pratiques en mode animé, ils le sont moins enmode statique. En effet, que se passe-t-il si le même bouton doit servir àfaire apparaître plusieurs pages ? Comment s’y prendre pour faire juste apparaîtreou disparaître des éléments et non pour les animer ? Et si vous disposezd’un navigateur qui ne prend pas en charge la balise que vous utilisez ?Tant que les navigateurs ne supporteront pas parfaitement le SVG, il estrisqué d’utiliser des balises d’animation sur les éléments importants d’unsite web, car ils pourraient ne pas être affichés. Quand cela est possible, ilvaut mieux utiliser les langages ECMAScript ou JavaScript. En effet,Javascript est installé sur tous les ordinateurs, et, en général, il est activé.JavaScript est donc un précieux allié du SVG et de l’interactivité.Comme nous avons pu le voir, la manipulation des événements en SVGdiffère peu de celle en HTML classique. Des attributs spécifiques sontutilisés directement dans les balises qui déclenchent l’action. Ces actionsferont appel à des fonctions définies en début de document, ou dans unfichier externe afin de les partager entre plusieurs fichiers SVG.Pour cet exercice, nous nous baserons sur une présentation du mêmetype que celle que nous avons réalisée précédemment. Cependant, lebandeau supérieur sera permanent et contiendra la liste des pages sousforme d’images avec une étiquette de texte. Les images seront inséréesen noir et blanc dans le bandeau et seront remplacées par des imageséquivalentes en couleur. Il faudra cliquer sur une de ces miniatures pourfaire apparaître la page correspondante.La méthode la plus simple pour modifier un élément est d’exploiter son id.Certains diront que ce n’est pas la méthode la plus adaptée, certes, mais ellefonctionne dans toutes les situations et reste facile à mettre en œuvre, sansqu’aucune notion de programmation ne soit nécessaire. De plus, comme cetidentifiant est unique pour chaque objet de la page, cela vous évite de voustromper et vous permet d’anticiper des erreurs d’inattention.ATTENTION JavascriptDans les exemples suivants, nous avons optépour le JavaScript. En effet, ce langage est facileà prendre en main, et, si vous souhaitez approfondir,vous trouverez facilement de la documentation.R S. Powers : Débuter en JavaScript,2007, éditions EyrollesR T. Templier et A. Gougeon : JavaScriptpour le Web 2.0, 2007, éditions EyrollesVOCABULAIRE PageLe terme « page » fait référence à « page web »,c’est-à-dire ce qui s’affiche à l’écran à des différentsmoments. Le SVG ne supporte pas encore lesdocuments multipages en tant que tels.RAPPEL Gestion des liens en SVGSouvenez-vous qu’en SVG, les images sont liées audocument. Quand on réalise une page web, il estinapproprié d’incorporer directement les images. Ilfaut donc veiller à ce que vos deux versionsd’images soient facilement accessibles pour lefichier SVG, qui est souvent situé dans un dossierou sous-dossier adjacent.BON À SAVOIR Rollover en CSSLes rollovers qui agissent sur des propriétés CSS(comme les changements de couleurs ou d’opacité)se définissent directement en CSS par la créationde styles.14 – Les coulisses d’Inkscape : SVGFigure 14–3 Trois pages différentes, et pourtant le fichier SVG est le même.© Groupe Eyrolles, 2008 239