Mapes d’imatges

Posted by

L’etiqueta <map> en HTML serveix per definir àrees clicables dins una imatge. <map> està associat amb l’atribut usemap de <img> i crea una relació entre la imatge i el mapa. L’element <map> conté diversos elements <area>, que deifneix arees quadrades, circulars o poligonals i les associa a un vincle i un títol.

A continuació trobareu un exemple de mapa d’imatges aplicat a una Planta de Creu Llatina del Romànic


01. <img src="planta_creu_llatina.jpg" alt="Planta de Creu Llatina del Romànic" usemap="#plantamap">

02. <map name="plantamap">

03. <area shape="rect" coords="180,187,329,493" href="https://ca.wikipedia.org/wiki/Nau_(arquitectura)" target="_blank" alt="Nau Central" title="Nau Central">

04. <area shape="circle" coords="265,35,16" href="https://ca.wikipedia.org/wiki/Absis" target="_blank" alt="Absis" title="Absis">

05. <area shape="circle" coords="256,129,85" href="https://ca.wikipedia.org/wiki/Absidiola" target="_blank" alt="Absidioles" title="Absidioles">

06. </map>
 


NOTA: Passa el cursor per sobre de la Nau Central, l’Absis i les Absidioles de la Planta de Creu Llatina.
Planta de Creu Llatina del Romànic

Nau Central Absidioles Absis

Pots trobar més informació i exemples a W3SCHOOLS.

Activitats
  • Descarrega’t la imatge de la planta de creu llatina fent clic aquí i aplica-hi el codi de l’exemple en un document html.
  • Busca informació i afegeix dues àrees noves al mapa d’entre els elements arquitectònics característics de la planta de creu llatina del romànic que es llisten a continuació: presbiteri, creuer, transcepte, girola, pilars creuiformes, torre, altar, pilars o contraforts.