Bienvenue dans notre cours résumé sur l’html5. Nous avons vu la structure de base d’une page html, comment ajouter des paragraphes et des titres. Cette partie concerne la balise html5 qui permet d’ insérer une image réactive (qui contient des zones cliquables).
HTML5 : image réactive (mappée)
On peut avoir des images , dans nos pages web, qui contiennent des zones cliquables. Pour cela, on doit utiliser une balise html nommée map qui contient des zones bien définies qui représente les zones cliquables dans l’image. Chaque zone sera, alors, définit via la balise area. Ainsi, on utilise la syntaxe suivante :
- chaque zone (area) , définit le type de la zone cliquable (rectangle, cercle ou polygone).
- Selon le type de la zone, des coordonnées doivent être définit :
- On définit les coordonnées des deux extrémités a et b pour la zone rectangulaire (voir l’image )
- Pour la zone circulaire, on définit les coordonnées du centre et le rayon du cercle.
- Toute zone qui n’est ni rectangulaire ni circulaire, peut être dit en forme polygone. Pour cette dernière, on définit les coordonnées de toutes les extrémités une par une.
- Chaque zone a un attribut href qui définit le lien à ouvrir après le clic sur la zone correspondante.
- Les zones sont définit à l’intérieur de la balise map. Cette balise doit avoir l’attribut name où on précise un nom qui sera utilisé dans l’image réactive
- L’image réactive doit utilisé un attribut usemap où on met le nom du map qui définit les zones réactives et les liens à ouvrir.
Remarque : on peut utiliser n’importe quel outils d’images pour trouver les coordonnées des zones.
Voilà une vidéo de démonstration :
Vous pouvez suivre notre cours complet d’HTML. pour approfondir vos compétences sur le développement web en utilisant le langage html5.
Aussi, vous avez une playlist des vidéos (Explication en Darija arabe marocaine) bien organisée qui traite : Vidéos sur l’HTML5