Exemplo: Mapa clicável">

A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Mapas Clicáveis Objetivo: Elementos:

Apresentações semelhantes


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=http://inf.ufrgs.br/imagem.jpg usemap="#Mapa" alt="Mapa clicável">

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

4 Retângulo <map name="nomeMapaClicavel">
Ytopo Xesq 0,0 Retângulo 50,40 Xdir Yfundo <map name="nomeMapaClicavel"> <area shape="rect" href="http://……." coords="Xesq,Ytopo,Xdireita,Yfundo" > Exemplo: <map name="Mapa"> <area shape="rect" href="http://inf.ufrgs.br/retang.jpg" coords="0,0,50,40" > </map>

5 Círculo 50,50 Xcentro 40 Ycentro Raio <area shape= "circle" coords="Xcentro,Ycentro,Raio" href="http://……."> Exemplo: <map name="Mapa"> <area shape="circle" href="http://inf.ufrgs.br/circulo.jpg" 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="http://……."> Exemplo: <map name="Mapa"> <area shape="poly" href="http://inf.ufrgs.br/polig.jpg" 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="http://inf.ufrgs.br/circuloverde.jpg" coords="90,90,80" > <area shape="circle" nohref coords="90,90,40" > </map>

8 Página UFRGS <img src="http://www.ufrgs.br/ufrgs/img/img_index/cabecalho_new2_777x68.jpg" usemap="#Map" border=5> <map name="Map"> <area shape="rect" coords="0,0,35,68" href="http://www.ufrgs.br/ufrgs/pop_predios.asp?mapa=3" alt="OBSERVATÓRIO"> <area shape="rect" coords="31,0,128,68" href="http://www.ufrgs.br/ufrgs/" alt="Página Inicial"> <area shape="rect" coords="129,0,187,68" href="http://www.ufrgs.br/ufrgs/pop_predios.asp?mapa=1" alt="PAROBÉ"> <area shape="rect" coords="188,0,240,68" href="http://www.ufrgs.br/ufrgs/pop_predios.asp?mapa=2" alt="CHATEAU"> <area shape="rect" coords="241,0,307,68" href="http://www.ufrgs.br/ufrgs/pop_predios.asp?mapa=4" alt="AGRONOMIA"> <area shape="rect" coords="308,0,359,68" href="http://www.ufrgs.br/ufrgs/pop_predios.asp?mapa=5" alt="MUSEU">

9 Página UFRGS <area shape="rect" coords="360,0,433,68" href="http://www.ufrgs.br/ufrgs/pop_predios.asp?mapa=6" alt="ELETROTÉCNICO"> <area shape="rect" coords="434,0,496,68" href="http://www.ufrgs.br/ufrgs/pop_predios.asp?mapa=7" alt="QUÍMICA"> <area shape="rect" coords="497,0,556,68" href="http://www.ufrgs.br/ufrgs/pop_predios.asp?mapa=8" alt="MEDICINA"> <area shape="rect" coords="557,0,624,68" href="http://www.ufrgs.br/ufrgs/pop_predios.asp?mapa=9" alt="DIREITO"> <area shape="rect" coords="625,0,659,68" href="http://www.ufrgs.br/ufrgs/pop_predios.asp?mapa=10" alt="CASTELINHO"> <area shape="rect" coords="660,0,695,68" href="http://www.ufrgs.br/ufrgs/pop_predios.asp?mapa=11" alt="RÁDIO"> <area shape="rect" coords="696,0,773,68" href="http://www.ufrgs.br/ufrgs/pop_predios.asp?mapa=12" alt="ENGENHARIA"> </map>


Carregar ppt "Mapas Clicáveis Objetivo: Elementos:"

Apresentações semelhantes


Anúncios Google