docLes cartes Images cliquables
download 
Plainte Transcription
Les cartes Images cliquables
5/10/11 Les cartes INF2005– Programma1on web– A. Obaid Images cliquables • Ou1l permeCant d'effectuer des liens à par1r d'images (imagemaps) appelées Cartes. • On définit des zones dans la carte que l'on associe à des hyperliens iden1fiés par leurs URL – Ou1l de naviga1on basées sur les graphiques. • Les zones peuvent être des rectangles, des polygones, ou des cercles. INF2005– Programma1on web– A. Obaid 2 1 5/10/11 Images cliquables canard.html www.elevage.com/pigeon.html poussin.html www.fermes.com/vache.html INF2005– Programma1on web– A. Obaid 3 Types de cartes • Coté client: – Les URLs des zones sont contenus dans la même page HTML que l'image • Coté serveur: – L'informa1on de mappage se trouve sur le serveur et traité par un programme INF2005– Programma1on web– A. Obaid 4 2 5/10/11 Carte du coté client • Sur la base d'une image (GIF, JPEG, PNG, …), on définit les zones et des URL correspondants. • L'élément <MAP> permet de déclarer une carte basée sur ceCe image.. • Il possède le sous-‐élément <AREA> qui permet de définir une zone dans la carte. • Dans l'élément <IMG> on ajoute l'aCribut usemap INF2005– Programma1on web– A. Obaid 5 Carte du coté serveur • Sur HTTP le serveur, on crée un fichier .map. – On y met les formes, les coordonnes et les urls de chaque zone. • Dans l'élément <IMG> on u1lise l'aCribut ismap – On crée un hyperlien vers un script sur le serveur. • Le serveur traite la requête de mappage • Le script interprète le fichier .map et envoie l'URL de chaque zone au serveur HTTP. INF2005– Programma1on web– A. Obaid 6 3 5/10/11 <MAP> et <IMG> • <MAP> définit une carte et lui donne un nom avec l'aCribut name: • name="maCarte" : donne un nom maCarte à la carte. • Dans <IMG>, pour associer l'image à la carte iden1fiée par l'aCribut name de <MAP>, on u1lise l'aCribut Usemap • Usemap="#maCarte" 7 INF2005– Programma1on web– A. Obaid <area> • <AREA> définit une zone dans la carte • ACributs: – shape= "RECT|CIRCLE|POLY" : définit la forme de la zone. – coords="…" : donne la liste des coordonnées de la zone – href="URL" : déclare le lien associé à la zone. INF2005– Programma1on web– A. Obaid 8 4 5/10/11 Exemple <body> <map name="ferme"> <area shape="circle" coords="134,227,30" href="poussin.html"> <area shape="rect" coords="10, 119, 99, 193" href="canard.html"> <area shape="poly" coords="215,209, 240,235, 248,260, 268,235, 293,250, 299,200, 264,200, 228, 189, 215,209" href="vache.html"> <area shape="rect" coords="364,192,438,238" href="mouton.html"> <area shape="rect" coords="316,26,368,67" href="pigeon.html"> </map> <img src="ferme.jpg" usemap="#ferme"> </body> </html> ferme.html INF2005– Programma1on web– A. Obaid 9 Les formes • L'aCribut shape prend la valeur rect, poly ou circle spécifiant la forme de la zone. • L'aCribut coords con1ent la liste des cordonnées de la zone: – Si la forme est rect: • x1,y1, x2,y2 : point en haut à gâche et bas à droite. – Si la forme est circle: • x1,y2, R: cordonnées de centre et le rayon. – Si la forme est poly: • x1,y1, x2, y2, … : liste des cordonnées des points du polygone (fermé). INF2005– Programma1on web– A. Obaid 10 5 5/10/11 Ou1ls de créa1on de cartes • Il existe des ou1ls pour manipuler les cartes. – Ils permeCent de générer des coordonnées à par1r d'une l'image en u1lisant une interface graphique. – Ils génèrent un code html du fichier d'u1lisa1on des cartes. • Exemples: – MapThis – Mapedit (hCp://www.boutell.com/mapedit/) – The Gimp (hCp://www.gimp.org/windows/) 11 INF2005– Programma1on web– A. Obaid Les objets INF2005– Programma1on web– A. Obaid 6 5/10/11 <object> • Permet d'insérer un objet de différents types dans la page. – image, vidéo, audio, applet Java, anima1on flash, etc. • On spécifie l'objet à insérer et on spécifie ses paramètres (si besoin est) avec <param>. • Format: – <OBJECT ….> Alterna1ve </OBJECT> • Exécute l'objet spécifié dans <object> et si celui-‐ci n'est pas res1tué par le navigateur, la par1e Alterna5ve est exécutée. – Fonc1onne comme un if-‐then-‐else. INF2005– Programma1on web– A. Obaid 13 ACributs de <object> • <object> possède plusieurs aCributs : – – – – – – – – border="nombre": taille (en pixels) de la bordure autour de l'objet classid="URL":endroit où se trouve la classe de l'objet. codebase="URL" :endroit où se trouve l'objet. codetype="nom": type MIME de l'objet. data ="URL" :où se trouvent les données de l'objet. type="type" : type MIME des données dans data usemap="texte":iden1ficateur de la carte à u1liser. standby="texte": texte à afficher en aCendant que l'objet soit res1tué. • Les aCributs de style doivent être spécifiés avec le CCS INF2005– Programma1on web– A. Obaid 14 7 5/10/11 <object> ou <img> • On peut u1liser <object> au lieu de <img> • On a plus de souplesse. • On peut exploiter les alterna1ves de <object> 15 INF2005– Programma1on web– A. Obaid <OBJECT> ou <IMG> • Si pour une quelconque raison, l' image ne peut pas être res1tuée, on exécute ce qui se trouve entre <object> et </object> <html> <head> <1tle> un pe1te vache </1tle> </head> <h2> Afficher l'image </h2> <body> <object data="vache.gif" type="image/gif" width="300" 1tle="Une pe1te vache deguisee en fleur !" > Une image de la pe1te vache est supposée s'afficher ! </object> </body> </htmL> INF2005– Programma1on web– A. Obaid object3.html 16 8 5/10/11 <object> ou <img> • On peut u1liser ce mécanisme pour ajouter plus de robustesse à notre page: <h2> Afficher l'image </h2> <body> <object data="chameau.jpg" type="image/jpg" width="300" 1tle="Un pe1t chameau solitaire !" > <object data="vache1.gif" type="image/gif" width="300" 1tle="Une pe1te vache deguisee en fleur !" > </object> Une image est supposée s'afficher ici ! </object> </body> </htmL> Si le chameau ne s'affiche pas, on verra l'image de la vache. Sinon c'est le texte à la fin qui va s'afficher. object4.html INF2005– Programma1on web– A. Obaid 17 Plus d'aCributs de <a> • On peut les u1liser d'autres aCributs de <A> dans divers contextes: – Name="nom": nom d'une sec1on dans le document. – Target="nom": nom du cadre où doit s'afficher le document pointé. – Shape=" rect|cercle|poly " : forme géométrique d'un lien. • A u1liser seulement avec <OBJECT> – coords="liste": liste de coordonnées de la forme spécifiée dans shape. – … INF2005– Programma1on web– A. Obaid 18 9 5/10/11 <object> et cartes • <OBJECT> peut être u1lisé pour travailler avec les cartes. • On le combine avec <MAP> et <A> étendu avec des aCributs shape et coords: <object data="image" alt="texte" type="type MIME" usemap="#Carte"> <map name="Carte"> <a href="URL" shape="forme" coords=" …. "> … </a> <a href="URL" shape="forme" coords=" …. "> … </a> …. </map> </object> <BODY> <object data="europe.jpg" alt="Europe" type="image/jpg" usemap="#Europe"> <MAP NAME="Europe"> <A href="france.html" SHAPE=POLY COORDS="203,415,…,203,415"> <A href="allemagne.html" SHAPE=POLY COORDS="319,356,…,319,356"> <A href="espagne.html" SHAPE=POLY COORDS="42,524,…,2,524"> </MAP> </object> carteObjet.html 19 INF2005– Programma1on web– A. Obaid Autres objets • On peut u1liser <object> pour afficher un document audio, vidéo ou une anima1on – Exemple: La vache folle ! <object width="480" height="385"> <param name="movie" value="hCp://www.youtube.com/v/hgf6ZHqs1u..."> </param> <param name="allowFullScreen" value="true"> </param> <param name="allowscriptaccess" value="always"> </param> <embed src="hCp://www.youtube.com/v/hgf6ZHqs1uU?fs=1&hl=fr_FR" type="applica1on/x-‐shockwave-‐flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"> </embed> </object> object10.html INF2005– Programma1on web– A. Obaid 20 10
