Inkscape efficace Fichier PDF - e-nautia

Inkscape efficaceEN DÉTAIL GuillemetsRemarquez que nous utilisons ici des guillemetssimples qui correspondent à l’apostrophe placéesous le chiffre 4 du clavier.1 Réalisez, éventuellement sur trois calques, trois pages web contenantdes images et textes différents. Créez une bande horizontale comprenanttrois images qui serviront de lien. Lorsque l’utilisateur cliquera surune image, la page (calque) correspondante apparaîtra. Placez-vousalors sur la première vignette que vous souhaitez intervertir.2 Ouvrez l’éditeur XML (Ctrl+Maj+X). Créez un attribut onmouseover quiaura pour valeur document.getElementById('image6795').setAttribute('href','montsaintmichel1.png'). Remplacez image6795par l’id de l’image dans votre document et montsaintmichel1.png par lenom de l’image qui doit remplacer l’image existante. Si l’image se trouvedans un dossier différent, indiquez le chemin d’accès complet.Pour bien comprendre pourquoi nous écrivons tout cela, reprenonspoint par point les éléments nouveaux. onmouseover est l’instructionque va déclencher l’objet au survol de la souris. Les événements lesplus fréquents sont onmouseover, onmouseout. Ils agissent quandl’utilisateur place sa souris au dessus de l’objet et la retire. onclickdéclenche l’action lorsque l’utilisateur clique sur l’objet.La suite du code sert à indiquer au navigateur quel objet doit être modifiéet comment. Le navigateur interprétera donc ainsi le code que nousvenons de saisir : « dans le document en cours, trouve l’objet nomméimage6795 par son id, vérifie qu’il est bien le seul à s’appeler ainsi, puischange son attribut href par cette nouvelle image dont voici le nom ».3 Créez un nouvel attribut. Cette fois il s’agira de onmouseout. Faites-lesuivre des instructions permettant de rétablir l’image originale. Ellessont identiques à celles de l’étape 2. Seul le nom de l’image change.Saisissez donc simplement le nom de l’image à insérer à la place demontsaintmiche1.png. Enregistrez vos modifications.4 Vérifiez dans un navigateur que tout fonctionne correctement lorsquevous survolez la photo avec le curseur de la souris.5 Procédez de la même manière pour les autres vignettes.6 À présent, occupons nous d’implémenter l’affichage de la page lorsquel’utilisateur clique sur l’une des vignettes. Placez-vous sur la premièrevignette du bandeau et ajoutez-lui un attribut onclick. Sa valeur serajavascript:document.getElementById('barcelone').style.display='inline';. Il s’agit de modifier la valeur par défaut de display de lapage 'barcelone'. Cette valeur est placée dans l’attribut style del’objet 'barcelone'. Lorsque l’objet est invisible, Inkscape la positionnesur 'none'. En lui donnant la valeur 'inline', l’objet apparaîtra.7 Toujours dans l’attribut onclick, ajoutez la même ligne que précédemmentpour chaque autre page mais en attribuant la valeur 'none'à display. Sans cela, tous les objets resteront affichés et la navigations’en trouvera réduite. Vous devez donc obtenir :240© Groupe Eyrolles, 2008