Mapas Clicáveis Objetivo: Elementos:

Apresentação em tema: "Mapas Clicáveis Objetivo: Elementos:"— Transcrição da apresentação:

1 Mapas Clicáveis Objetivo: Elementos:
Criar áreas sob figuras que possam ser clicáveis e quando tal acionar um link Elementos: Imagem; Imagem sob a qual se estabelecerá as Mapa Clicável

2 Imagem <img src="http://……….." usemap="#nomeMapaClicável">
Exemplo: <img src= usemap="#Mapa" alt="Mapa clicável">

3 Mapa Clicável <map name="nomeMapaClicavel">
<area shape= "rect" coords="Xesq,Ytopo,Xdireita,Yfundo" href=" <area shape= "circle" coords="Xcentro,Ycentro,Raio" href=" <area shape= "poly" coords="X1,Y1,X2,Y2,X3,Y3…." href="

4 Retângulo <map name="nomeMapaClicavel">
Ytopo Xesq 0,0 Retângulo 50,40 Xdir Yfundo <map name="nomeMapaClicavel"> <area shape="rect" href=" coords="Xesq,Ytopo,Xdireita,Yfundo" > Exemplo: <map name="Mapa"> <area shape="rect" href=" coords="0,0,50,40" > </map>

5 Círculo 50,50 Xcentro 40 Ycentro Raio <area shape= "circle" coords="Xcentro,Ycentro,Raio" href=" Exemplo: <map name="Mapa"> <area shape="circle" href=" coords="50,50,40" > </map>

6 70,20 Polígono 20,30 120,30 30,100 100,100 <area shape= "poly" coords="X1,Y1,X2,Y2,X3,Y3…." href=" Exemplo: <map name="Mapa"> <area shape="poly" href=" coords="70,20,120,30,100,100,30,100,20,30" > </map>

7 Figuras especiais É possível criar figuras por sobreposição de outras figuras inativas (usando "nohref"). Exemplo: anel verde <map name="Mapa"> <area shape="circle" href=" coords="90,90,80" > <area shape="circle" nohref coords="90,90,40" > </map>

8 Página UFRGS <img src=" usemap="#Map" border=5> <map name="Map"> <area shape="rect" coords="0,0,35,68" href=" alt="OBSERVATÓRIO"> <area shape="rect" coords="31,0,128,68" href=" alt="Página Inicial"> <area shape="rect" coords="129,0,187,68" href=" alt="PAROBÉ"> <area shape="rect" coords="188,0,240,68" href=" alt="CHATEAU"> <area shape="rect" coords="241,0,307,68" href=" alt="AGRONOMIA"> <area shape="rect" coords="308,0,359,68" href=" alt="MUSEU">

9 Página UFRGS <area shape="rect" coords="360,0,433,68" href=" alt="ELETROTÉCNICO"> <area shape="rect" coords="434,0,496,68" href=" alt="QUÍMICA"> <area shape="rect" coords="497,0,556,68" href=" alt="MEDICINA"> <area shape="rect" coords="557,0,624,68" href=" alt="DIREITO"> <area shape="rect" coords="625,0,659,68" href=" alt="CASTELINHO"> <area shape="rect" coords="660,0,695,68" href=" alt="RÁDIO"> <area shape="rect" coords="696,0,773,68" href=" alt="ENGENHARIA"> </map>