Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Créer une image interactive avec Dreamweaver et FrontPage

Créer une image interactive avec Dreamweaver et FrontPage

Chouette ! J'ai appris le code XHTML des cartes cliquables. Mais j'ai toujours un problème Comment vais-je faire pour tracer une zone réactive d'une image interactive Je dois être un diable pour y parvenir. Ne vous emballez pas les gars. Ce n'est pas ce petit problème qui va nous ralentir

Carte cliquable avec FrontPage

Je parie que vous vous êtes demandés comment faire pour déterminer les coordonnées des zones réactives d'une carte cliquable ? Pas de panique les gars, moi aussi je ne peux pas le faire tout seul. En fait tous les webmasters (à part un qui s'appelle Jimmy Neuton ) se servent de logiciels qui sont mieux placés pour ce genre de travail. Voici comment accomplir cette tâche lourde en un clin d'œil avec FrontPage :

On suppose que vous l'avez ouvert et que vous avez insérer une image.
Tout d'abord placez le curseur sur l'image et cliquez sur le bouton gauche pour la sélectionner. Des petits rectangles en bleu apparaîtront sur les bords de l'image.

définir des zones interactives d'une carte cliquable avec FrontPage

Ensuite si la barre "images" n'apparaît pas, vous devez l'activer. Pour ce faire cliquez sur le menu "affichage" puis sélectionnez "barres d'outils" et enfin cliquez sur "images". Voici une illustration explicative pour ceux qui ont du mal à suivre :

définir des zones réactives d'une image interactive avec FrontPage

La barre d'images va apparaître au milieu de la fenêtre. Remarquez la zone entourée par le rouge ne vous-rappelle-t-elle pas quelque chose ? Si, nos trois méthodes de découpages rect, circle et poly de l'attribut shape. Assurez-vous que l'image est bien sélectionnée pour avoir accès aux trois outils.

créer des images mapées avec FrontPage

Sélectionnez l'une de ces méthodes puis appliquez-là sur vôtre image.

définir une carte image avec FrontPage

Y a pas de formules magiques, j'ai sélectionné l'outil cercle puis j'ai tracé un rond au-dessus de mon image, une fois tracé, la fenêtre "Insérer un lien hypertexte" apparaît. Il ne vous reste plus qu'à sélectionner un fichier pour votre lien. Rappelez-vous qu'il faut choisir le bon outil, dans cet exemple il est carrément inutile de se servir du rectangle pour définir les coordonnées de notre cercle.

Carte cliquable avec dreamweaver

On considère que votre photo est insérée dans dreamweaver, click droit sur l'image puis sélectionnez "propriétés" :

Définir une carte graphique avec Dreamweaver

Cela aura pour effet d'ajouter un panneau en bas de votre éditeur, ce panneau contient tous les attributs de votre image : sa source, ses dimensions, son nom etc.

Définir une carte graphique avec Dreamweaver

A présent introduisez un nom dans le cadre que j'ai marqué en rouge (nom qui sera attribué à la balise <map>), puis en bas sélectionnez un outil et tracez une zone réactive dans l'image. Une fois fait, notre panneau va changer légèrement d'aspect :

Définir une carte interactive avec Dreamweaver

Cliquez sur le dossier marqué par le vert. Une petite fenêtre va s'ouvrir, parcourez vos disques durs pour sélectionner l'adresse de votre page qui servira de lien.

Voilà, notre tutoriel touche à sa fin. J'espère qu'il vous a apporté de la valeur ajoutée. Le prochain tuto sera dédié aux images (types d'images : images matricielles ou bitmap et images vectorielles).

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau