Assine:
Mapear Regiao
Substituindo a tag map pelo css.
Escrito por faro em WebStandards e CSS. Data: 16/07/2008
Licença: Alguns direitos reservados. Dar créditos ao autor e linkar este original
Boa noite pessoal.
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
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
Mais recentes em WebStandards e CSS
- Mini-lib css reset do micox
- Por Micox - Abaixo mostrarei tipo uma mini-lib css com o qual eu...
- Mapear regiao
- Por faro - Substituindo a tag map pelo css....
- Layout diferente.
- Por faro - Boa noite pessoal como vão todos... esse é meu primeiro...
- Rollover via css
- Por NightSpy - Achei este efeito na net, como não achei novamente,...
- Menu drop-down só com css - até 4 níveis
- Por Micox - Código pronto - só copiar, colar e usar...
Ver mais Artigos de WebStandards e CSS.
Ver e retirar outras dúvidas no fórum Webly.
Alguns Direitos Reservados | RSS | O Fórum
Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com
Comentários:
Micox disse:
ckav disse:
como ainda estou começando desconhecia a função, muito bom
\o/
faro disse:
como ainda estou começando desconhecia a função, muito bom
\o/
valew micox, brigado por fazer.
peço desculpas. pelo que vejo postei um tutorial no lugar errado.
alguem pode me refrescar a memoria....
prometo postar no local certo.
aproveito para dizer que em breve meu blog ou melhor meu wordpress sairá, peço tb pra vcs disponibilizar seus blogs, wordpress preu add lá seria muito importante.
valew
faro disse:
como ainda estou começando desconhecia a função, muito bom
\o/
valew micox, brigado por fazer.
peço desculpas. pelo que vejo postei um tutorial no lugar errado.
alguem pode me refrescar a memoria....
prometo postar no local certo.
aproveito para dizer que em breve meu blog ou melhor meu wordpress sairá, peço tb pra vcs disponibilizar seus blogs, wordpress preu add lá seria muito importante.
valew
como ainda estou começando desconhecia a função, muito bom
\o/
valew micox, brigado por fazer.
peço desculpas. pelo que vejo postei um tutorial no lugar errado.
alguem pode me refrescar a memoria....
prometo postar no local certo.
aproveito para dizer que em breve meu blog ou melhor meu wordpress sairá, peço tb pra vcs disponibilizar seus blogs, wordpress preu add lá seria muito importante.
valew
cade vcs pessoal.
to esperando pelos blogs para visitar e postar lá no meu.
Ver o restante dos comentários no fórum (e aproveitar pra comentar também !).