Comment créer des Image Maps en HTML

Créer des liens imageMap
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Cours HTML5 et CSS3 / Part 1
Revoir le teaser Je m'abonne
5,0
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
5,0
39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

L'objectif de cette vidéo est de maîtriser la création d'image maps en HTML, d'apprendre à utiliser des outils pour définir les coordonnées des zones clics, et de comprendre les bonnes pratiques en termes d'accessibilité.

Apprenez à créer des image maps en HTML, permettant de rendre certaines zones d'une image interactives avec des liens définis.

Dans cette leçon, nous explorons la création d'image maps en HTML. Une image map permet de rendre certaines zones d'une image interactives avec des liens spécifiques. Nous commençons par insérer une image et utiliser des outils pour définir les coordonnées des zones cliquables, comme Dreamweaver ou des sites spécialisés tels qu'imagemaps.com. Une fois les coordonnées obtenues, nous les intégrons dans notre code HTML, en veillant à les relier correctement via l'attribut usemap. Nous discutons également des aspects d'accessibilité de cette technique, soulignant les limitations pour les personnes malvoyantes ou aveugles. Finalement, nous voyons comment tester notre image map dans un navigateur pour vérifier son bon fonctionnement.

Voir plus
Questions réponses
Quels outils peuvent être utilisés pour définir les coordonnées des zones cliquables d'une image map?
Des outils tels que Dreamweaver, GIMP ou des sites spécialisés comme imagemaps.com peuvent être utilisés pour définir les coordonnées des zones cliquables d'une image map.
Pourquoi l'accessibilité est-elle une considération importante lors de l'utilisation des image maps?
L'accessibilité est cruciale car les image maps peuvent poser des défis aux personnes malvoyantes ou aveugles, rendant la navigation difficile sans descriptions textuelles appropriées.
Quelles sont les étapes principales pour intégrer une image map dans une page HTML?
Les étapes principales sont : insérer l'image dans la page HTML, définir les zones cliquables avec les coordonnées, ajouter l'attribut usemap à l'image et intégrer les balises map et area avec les coordonnées spécifiques et les liens.
Nous allons poursuivre la création de liens en créant ce qu'on appelle des « image maps », c'est-à-dire une carte image, donc c'est-à-dire une image qui va être active sur certaines zones. Donc on va dessiner une image, enfin on va placer une image dans notre page, c'est ce que nous avons vu ici, donc elle s'appelle « img », c'est un identifiant, on va l'appeler « Paris », et puis la source c'est l'image « paris.gif » que nous avons dans notre dossier. Dans un navigateur, cela donne cette représentation-là. Alors, ce que nous allons faire, c'est créer des zones avec des points qui vont permettre de rendre actifs, par exemple, cet arrondissement, cet arrondissement, et puis le centre, par exemple. Alors, pour réaliser ça, c'est assez complexe puisqu'il va falloir connaître les coordonnées de ces différents points, ce qui est relativement assez compliqué, mais il existe des logiciels qui vont permettre de dessiner et puis donc de récupérer ces fameux points. Alors, par exemple, avec Dreamweaver, vous allez pouvoir faire ça assez facilement en sélectionnant l'image et en allant dans les propriétés, vous allez trouver ça très facilement dans la zone « propriétés ». Maintenant, il existe des outils sur Internet qui permettent de réaliser la même chose. Alors, nous allons y aller. Donc, il existe un site qui s'appelle « imagemap.com », donc « images-maps.com ». En arrivant sur ce site, on peut cliquer ici, par exemple, pour aller chercher notre fameuse image. Alors, c'est notre image, c'est la même que j'ai utilisée, donc tout simplement. Et puis, « start mapping ». Voilà, on clique ici pour continuer et on va pouvoir accéder maintenant à l'interface qui permet de réaliser ces petits points. Alors, un clic droit, elle nous permet de voir, de sous le menu, qui nous permet de dire, voilà, on peut réaliser un rectangle, un polygone ou un cercle. On va réaliser pour l'instant un rectangle, tout simplement. Voilà, le rectangle est réalisé. Je vais le déplacer ici. Voici. Dans cette petite boîte de dialogue, on va simplement mettre l'adresse du site que nous irons voir, par exemple, Google, lorsqu'on cliquera sur cette zone. On va ajouter un titre « lien vers Google ». Vous pourriez également accéder à une page placée en local sur votre site, comme nous avons fait précédemment avec la page 2, par exemple, ou la page bleue et la page rouge. Et voilà, donc « save ». Ça y est, mon rectangle est réalisé. Je vais à présent réaliser un polygone qui est nettement plus compliqué en soi. Alors, polygone, on clique, on reclique, on clique, on clique, donc on réalise un véritable polygone de la forme que l'on souhaite, donc ce qui est super intéressant. Voilà, donc ça c'est mon polygone. Pareil, on va aller sur le site et les formes. Et puis, pareil, « lien vers » et les formes. Nous pourrions ainsi, donc « save », créer encore un autre polygone. Voilà, hop, hop, de la forme qui nous intéresse. Et voici. OK. Donc allons sur le site « gobelin.fr » et puis « lien vers Gobelin ». Voilà, alors « save ». Pour pouvoir récupérer le code, nous allons cliquer sur « get code ». Voilà. Et dans l'onglet qui s'appelle « html code », nous avons dans la partie inférieure, en fait, tout le code qui nous intéresse. Alors, pour l'instant, il paraît très compliqué, vous allez voir, on va le simplifier. Donc je prends tout, je copie, et je reviens sur ma page. Alors pour l'instant, je vais le mettre dans la partie inférieure, « coller ». Donc ça fait beaucoup de texte, mais on va s'en sortir. Alors l'identifiant, donc là, il s'agit de mon image. Donc l'image, moi je l'ai déjà écrite là. Donc je n'ai pas besoin de la réécrire une seconde fois. Qu'est-ce que nous dit cette image, lorsque l'on fait un petit peu de ménage là-dessus ? Donc ça, c'est la balise images. Nous dit l'identification de l'image, j'ai tout ça. La source, bon, elle est sur « image map », mais nous, elle est déjà en local, donc on va utiliser notre propre balise IMG. Border, etc., tout ça, on n'en a pas besoin. Nous avons besoin de « use map ». Ça, c'est important. Je coupe et je colle. Tout le reste, on n'en a pas besoin. Bien. « Use map », c'est un peu compliqué, donc on va l'appeler « ma map ». Tout simplement. Voilà. Alors maintenant, une image map, c'est constitué d'une image, ça y est, nous l'avons, d'un attribut qui s'appelle « use map », qui fait appel à des coordonnées, coordonnées qui sont dessous, et c'est la raison pour laquelle nous sommes allés sur ce site. « Use map », « ma map », il va falloir le relier à ça. « Map name », c'est ce fameux nom que nous avons supprimé et qui est remplacé maintenant par « ma map ». Attention, là, on a « name » « ma map », et là, on a « use map » « dièse » « ma map ». Le « dièse » a la même utilité que dans les exercices précédents, c'est-à-dire, on lui dit « on reste sur cette page » et on va chercher quelque chose qui s'appelle « ma map ». Alors, ensuite, cet identifiant, nous n'en avons pas besoin. On va simplifier tout ça. Par contre, à cet endroit-là, nous ne supprimons rien. Les trois ou quatre zones d'AREA sont des zones importantes. Donc là, nous avons le lien vers Google. Là, il y a une zone « map » en trop. C'est un moment où j'ai dû cliquer qui a créé une page supplémentaire. Donc là, le lien vers Google, c'est ce que nous avons fait. Le lien LFORM et le lien vers Gobelin. Nous avons nos trois images « map ». J'enregistre et nous allons pouvoir tester directement dans notre navigateur. Je reviens sur ma page. Alors, pour l'instant, vous voyez, ici, là, il n'y a rien. Là non plus. Là non plus. J'actualise. Ça y est, il y a effectivement le lien ici, le lien là et enfin le lien là. Si je clique, nous accédons bien directement au site Google. Ici, LFORM. Et ici, Gobelin. Donc voilà, nous avons réalisé ce que l'on appelle une image « map ». Donc, c'est une carte image. Ce sont une même image qui ne comporte plus rien. Alors, n'abusez pas trop avec ce style de mécanisme, car il est vrai que ce n'est pas hyper accessible. En effet, quelqu'un qui est malvoyant, quelqu'un qui aveugle, quelqu'un qui utilise un navigateur oral aura des difficultés à naviguer à l'intérieur de ce type de page. Mais néanmoins, dans le cas qui nous intéresse ici, par exemple pour le cas de la carte, cela peut être relativement intéressant.
8 commentaires
5,0
8 votes
5
4
3
2
1
Polyores
Il y a 11 months
Commentaire
Bravo et bravo encore. Belle méthodologie. Hâte de voir la suite de la démystification du Html
ralahoul
Il y a 1 year
Commentaire
Une formation très intéressante et très bien construite.
eric.gk78
Il y a 3 years
Commentaire
excellent, compréhensible pour les débutants
alexwebtv
Il y a 3 years
Commentaire
Très bonne formation .
gabamano85
Il y a 3 years
Commentaire
Très belle présentation et facile à comprendre même pour un novice.
olivier_89
Il y a 3 years
Commentaire
explication très organisée et simple de comprendre pour les débutants
a.platiau_1
Il y a 3 years
Commentaire
Super formation. Très claire et très bien organisée.
ezerrou
Il y a 3 years
Commentaire
est ce la 2éme partie existe sur ce cours?
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ? Le fonctionnement des sites web ainsi que la structure d'une page HTML.  Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre la structure du CSS, les tableaux, boutons et formulaires en CSS.  Vous suivez la méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre CSS 3
    Découvrir
    14h58 172 leçons 4,50 / 5
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5