Mapas e Menus
Índice da página:
Os Exemplos que seguem, servem para ter uma pequena ideia de como construir simples Menus
através de html. Nestes exemplos recorremos do estilo text/css, para
se familiarizar com esta aplicação.(veja nosso curso de CSS). Na generalidade recorre-se a este estilo para
não estar a repetir comandos extensos em tabelas.
Exemplo:
Exemplo:
<html>
<head>
<title>Menu Horizontal</title>
<style type="text/css">
.bot{font-family:Verdana,Arial; color:#ffff99; font-size:10px;
background:#184A4A; border:thin solid #875535; cursor:hand}
a:hover{font-family:Verdana,Arial; color:#FF9900; font-size:11px;text-decoration:none}
.1 {font-family:Verdana,Arial; color:#FFFF99; font-size:11px; text-decoration:none}
td {font-family:Verdana,Arial; font-weight:bold; text-align:center;
color:#FFFF99; font-size:11px; background:#184A4A}
</style>
</head>
<body leftmargin="0" topmargin="0" bgcolor="#333333" text="#FFFF99">
<table bordercolor="#875535" height="22" cellspacing="0" width="100%" border="1">
<tr>
<td width="100%" height="18">
<table height="20" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td><a href="exe101.htm" class="tx1a">Exemplo 1</a></td>
<td> | </td>
<td><a href="exe102.htm" class="tx1a">Exemplo 2</a></td>
<td> | </td>
<td><a href="exe103.htm" class="tx1a">Exemplo 3</a></td></tr>
</table>
</td></tr>
</table>
<br><br>
<center class="tx1a"><h3>Eu Sou o Home</h3></center>
<div align="center">
<input type="button" value="Fechar Janela" class="bot" onclick="window.close()">
</div>
</body>
</html>
 Ver |
 Índice |
Neste exemplo servimo-nos também de um iframe para mostrar as
páginas de retorno do Menu, e duas funções de JavaScript para poder ver as
tabelas em mudança de cor.
Exemplo:
Exemplo:
<html>
<head>
<title>Menu Vertical</title>
<style type="text/css">
.bot{font-family:Verdana,Arial; color:#ffff99; font-size:10px;
background:#184A4A; border:thin solid #875535; cursor:hand}
a:hover{font-family:Verdana,Arial; color:#ADD8E6; font-size:11px;text-decoration:none}
.1 {font-family:Verdana,Arial; color:#FFFF99; font-size:11px; text-decoration:none}
td {font-family:Verdana,Arial; font-weight:bold; text-align:center;
color:#FFFF99; font-size:11px; height:20}
</style>
<script language=javascript>
function mOvr(src,clrOver)
{ if (!src.contains(event.fromElement))
{ src.style.cursor = 'hand';
src.bgColor = clrOver;}}
function mOut(src,clrIn)
{ if (!src.contains(event.toElement))
{ src.style.cursor = 'default';
src.bgColor = clrIn;}}
</script>
</head>
<body leftmargin="0" topmargin="0" bgcolor="#333333" text="#FFFF99">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr valign="TOP">
<td width="100">
<table border="1" width="100%" cellpadding="0" cellspacing="0" bgcolor="#184A4A">
<tr>
<td onmouseover="mOvr(this,'#875535')" onmouseout="mOut(this,'#184A4A')">
<a href="exe101.htm" target="Menu" class="tx1a">Exemplo 1</a></td></tr>
<tr>
<td onmouseover="mOvr(this,'#875535')" onmouseout="mOut(this,'#184A4A')">
<a href="exe102.htm" target="Menu" class="tx1a">Exemplo 2</a></td></tr>
<tr>
<td onmouseover="mOvr(this,'#875535')" onmouseout="mOut(this,'#184A4A')">
<a href="exe103.htm" target="Menu" class="tx1a">Exemplo 3</a></td></tr>
</table>
</td>
<td>
<iframe src="exe104.htm" frameborder="0" align="left" width="260" name="Menu" height="120">
</iframe></td>
</tr>
</table><br>
<div align="center">
<input type="button" value="Fechar Janela" class="bot" onclick="window.close()">
</div>
</body>
</html>
| Ver |
Índice |
map ou mapa é uma expressão que permite referenciar imagens ou mapas
para ligação a hiperlinks referenciados. A Expressão é: <map></map>.Os
seus Atributos são:
• name="nome". Nome do mapa.
• area shape="poly".(rect,circle,poly), respectivamente (rectângulo, círculo ou polígono).
• coords="valor". Valor das coordenadas dos pontos da área.
• href="url". Endereço da página ou evento a efectuar.
• area shape="poly".(rect,circle,poly), respectivamente (rectângulo, círculo ou polígono).
• coords="valor". Valor das coordenadas dos pontos da área.
• href="url". Endereço da página ou evento a efectuar.
No nosso exemplo iremos aplicar um gráfico
muito simples. É feito com um pentágono dividido ao meio com duas cores, o qual constituimos dois polígonos.
O primeiro é constituído pelos pontos: (4,17,22,4,22,38,11,38), o segundo é constituído
pelos pontos: (22,4,39,17,32,38,22,38). Claro que estes gráficos terão que ser feitos
com um programa de Desenho. No caso presente foi feito com o PaintShop. Pode aplicá-lo a mapas ou mesmo fotos, demarcando as
áreas com os pontos desejados.No Caso presente aplicamos mais dois gráficos de cores sobrepostas e uma função de javascript, para podermos fazer o efeito de selecção.
Exemplo:
<html>
<head>
<title>Mapa</title>
<style type="text/css">
.bot{font-family:Verdana,Arial; color:#ffff99; font-size:10px;
background:#184A4A; border:thin solid #875535; cursor:hand}
</style>
<script language=JavaScript type="text/javascript">
function imageChange(imageID,imageName){
document.images[imageID].src = eval(imageName + ".src")}
graf1 = new Image();graf1.src = "polig.gif";
graf2 = new Image();graf2.src = "polig1.gif";
graf3 = new Image();graf3.src = "polig2.gif";
</script>
</head>
<body leftmargin="0" topmargin="0" bgcolor="#333333" text="#FFFF99">
<H3>Mapas</H3>
<div align="center">
<img src="polig.gif" alt="" usemap="#Mapa" border="0" name="um"></div>
<br><div align="center">
<input type="button" value="Fechar Janela" class="bot" onclick="window.close()">
</div>
<map name="Mapa">
<area shape="poly" coords="4,17,22,4,22,38,11,38" href="exe101.htm"
onmouseover="imageChange('um','graf2')"
onmouseout="imageChange('um','graf1')">
<area shape="poly" coords="22,4,39,17,32,38,22,38" href="exe102.htm"
onmouseover="imageChange('um','graf3')"
onmouseout="imageChange('um','graf1')">
</map>
</body>
</html>
| Ver |
Índice |
Se desejar faça o Download dos gráficos com o botão direito do rato.
Graf1:
Graf2: 
Graf3: 
Graf1:
Graf2:
Graf3: 
