Vou postar esse tutorial pelo seguinte motivo:
vejo muita gente usando a tag map para mapear determinada regiao e juntamente com um link, ñ sabendo que está em desuso.
Nesse exemplo que posto aqui criei um layout com um topo que é uma imagem qualquer com 758 de largura e 50 de altura. mas quero que quando a pessoa clicar sobre a imagem volte a home, a diferença é que ñ qero que esse link ocupe a imagem toda, quero apenas que ocupe 200px da imagem, ´hoje isso é muito usado na maioria dos site, o problema é que o pessoal usa ainda a tag map cmo fazer isso....
ñ esqueçam de comentar.
pois bem. entao la vai.
<html>
<head>
<style type="text/css">
body{
margin:0px;
padding:0px;
text-align:center;
background-color:silver;
font-family:arial, verdana, serif;
font-size:11px;
}
#moldura{
width:758px;
height:500px;
margin:0 auto;
background-color:white;
text-align:left;
}
ul {
position: relative;
list-style: none;
margin:0;
padding: 0;
width: 758px;
height:50px;
background-image: url(carro02.jpg); <!--a imagem que vai receber o link-->
backgrond-repeat: no-repeat;
}
a {
position: absolute;
display: block;
text-decoration: none;
}
a.regiao {
width: 200px;
height:50px;
margin:0 auto;
}
a:hover {
border:none;
}
#topo {
width:758px;
height:500px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="moldura">
<div id="topo">
<ul>
<a href="teste_home.htm" title="home" class="regiao"></a>
</ul>
</div>
</body>
</html>o resultado
testado no ie7 e firefox 03

Entrar
Cadastre-se
Ajuda
Responder


Quote

