Mapear uma imagem apenas com css

Veremos como mapear uma região sem o uso da tag map, utilizando apenas CSS.

Por Anderson Faro


Publicado em: 13/8/08
Valorize este artigo:
Vejo muita gente usando a tag map para mapear determinada regiao e juntamente com um link, não 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 não quero que esse link ocupe a imagem toda, quero apenas que ocupe 200px da imagem. Hoje em dia isso é muito usado na maioria dos sites, o problema é que o pessoal usa ainda a tag map para fazer isso....

Segue o código:

<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>





Comentários do artigo
Foi enviado 1 comentário ao artigo
1 comentário não revisado
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato