1 / 9

Mapas Clicáveis

Mapas Clicáveis. Objetivo: 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. Imagem. <img src="http://……….." usemap="#nomeMapaClicável"> Exemplo:

rafiki
Download Presentation

Mapas Clicáveis

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Mapas Clicáveis • Objetivo: • 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 Ytopo 0,0 Xesq 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. Polígono 70,20 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&Oacute;RIO"> <area shape="rect" coords="31,0,128,68" href="http://www.ufrgs.br/ufrgs/" alt="P&aacute;gina Inicial"> <area shape="rect" coords="129,0,187,68" href="http://www.ufrgs.br/ufrgs/pop_predios.asp?mapa=1" alt="PAROB&Eacute;"> <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&Eacute;CNICO"> <area shape="rect" coords="434,0,496,68" href="http://www.ufrgs.br/ufrgs/pop_predios.asp?mapa=7" alt="QU&Iacute;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&Aacute;DIO"> <area shape="rect" coords="696,0,773,68" href="http://www.ufrgs.br/ufrgs/pop_predios.asp?mapa=12" alt="ENGENHARIA"> </map>

More Related