<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meu Site</title>
</head>
<style type="text/css">
body{
background-image:url(imagem/fundo.jpg);
font-family:Verdana, Geneva, sans-serif;
color:black;
}
#principal{
width:550px;
height:150px;
margin:auto;
}
#menu{
width:800px;
height:100px;
}
#menu a{
display:inline-block;
margin-left:20px;
border:groove 5px #7b7b7b;
}
#menu a:hover{
background-color:#dceaf5;
}
#painel{
width:800px;
height:20px;
background-color:#903;
text-align:left;
font-style:italic;
font-size:11px;
clear:both;
background:url(imagem/seta.png) left no-repeat;
margin-left:30px;
}
#corpo{
width:780px;
height:430px;
margin:10px;
border:double 1px #000;
float:left;
text-align:center;
}
#rodape{
width:800px;
height:50px;
clear:both;
font-size:12px;
font-weight:bold;
text-align:center;
color:#000;
}
</style>
<body><div id="principal">
<div id="menu"><br />
<a href="Ponha o link para redirecionar a imagem 1" onmouseover="m1()" onmouseout="nada()"><img src="Ponha o link da imagem que deseja colocar (imagem 1)" width="68" height="68" border="none"/></a>
<a href="Ponha o link para redirecionar a imagem 2" onmouseover="m2()" onmouseout="nada()"><img src="Ponha o link da imagem que deseja colocar (imagem 2)" width="68" height="68" border="none"/></a>
<a href="Ponha o link para redirecionar a imagem 3" onmouseover="m3()" onmouseout="nada()"><img src="Ponha o link da imagem que deseja colocar (imagem 3)" width="68" height="68" border="none"/></a>
<a href="Ponha o link para redirecionar a imagem 4" onmouseover="m4()" onmouseout="nada()"><img src="Ponha o link da imagem que deseja colocar (imagem 4)" width="68" height="68" border="none"/></a>
<a Ponha o link para redirecionar a imagem 5" onmouseover="m5()" onmouseout="nada()"><img src="Ponha o link da imagem que deseja colocar (imagem 5)" width="68" height="68" border="none"/></a>
<div id="painel">Para ver algumas das coisas que temos para lhe oferecer, passe o mouse por cima de uma imagem.</div>
</div>
<div id="rodape"><br /></div>
</div>
<script language="javascript">
function m1()
{
document.getElementById("painel").
innerHTML="Escreva a legenda da imagem 1";
}
function m2()
{
document.getElementById("painel").
innerHTML="Escreva a legenda da imagem 2 ";
}
function m3()
{
document.getElementById("painel").
innerHTML="Escreva a legenda da imagem 3";
}
function m4()
{
document.getElementById("painel").
innerHTML="Escreva a legenda da imagem 4!";
}
function m5()
{
document.getElementById("painel").
innerHTML="Escreva a legenda da imagem 5 ";
}
function nada()
{
document.getElementById("painel").
innerHTML="Escreva a legenda que aparecerá antes de passar o mouse";
}
</script>
</body>
</html>
