Veremos como mapear uma região sem o uso da tag map, utilizando apenas 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" class="regiao"></a>
</ul>
</div>
</body>
</html>
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>
Postagens
0 Comments:
Postar um comentário