Mapear uma imagem apenas com css

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”></a>
</ul>
</div>
</body>
</html>

Fonte: http://www.criarweb.com/artigos/mapear-imagem-apenas-com-css.html

Deixe um comentário