Webly: Mapear Regiao - Webly

Ir para

Regras para postagem

É permitido postar livremente respostas com comentários, testes e avaliações dos scripts. Postagens contendo dúvidas sobre o script, deverão ser postadas no fórum principal de Webstandards/Tableless/CSS/XML.

IMPORTANTE: Todos os tutoriais postados neste fórum irão automaticamente para o portal Webly. Contribua você também e faça parte da equipe de colaboradores que fazem a evolução da web. Obrigado.
Página 1 de 1

Mapear Regiao substituindo a tag map pelo css. Avaliar tópico: -----

#1 Membro offline   faro Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 82
  • Cadastrado: 07-julho 08
  • Sexo:Male
  • Localização:salvador bahia

Postou 16 julho 2008 - 12:31

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

#2 Membro offline   Micox Ícone

  • Comunidade de desenvolvedores
  • Ícone
  • Grupo: Administradores
  • Posts: 5511
  • Cadastrado: 03-julho 06
  • Localização:Goiânia-GO
  • Interesses:Webly e elmicox.blogspot.com

Postou 16 julho 2008 - 08:29

Opa, vou mover pra área de tutoriais ok?
valeus.net/mwords - Links automáticos p/ o MercadoLivre em seu texto

Ajude, responda: mesmo que não saiba exatamente a resposta, seu pitaco pode dar uma luz no problema do outro.
Não respondo dúvidas por MP / Email / MSN e afins. O fórum está aqui pra isto.

elmicox.blogspot.com
0

#3 Membro offline   ckav Ícone

  • cadastre-se no fórum e participe^~
  • Ícone
  • Grupo: Coordenadores
  • Posts: 1695
  • Cadastrado: 08-setembro 06
  • Sexo:Male
  • Localização:São Paulo/SP
  • Interesses:Design, Animação, Ilustração, Vetor, Criação, Cores, Flash, Action Script, notepad++, XHTML/CSS, Fireworks, Photoshop, Illustrator, InDesign, After effects, 3D, PHP, Web standards...

Postou 16 julho 2008 - 08:44

interessante!
como ainda estou começando desconhecia a função, muito bom :D
\o/
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
------------------------------------------------------------------------------------------------------------------
"A cada pergunta idiota que eu faço e tenho a resposta, significa que estou um pouco menos idiota!!!"
Eu
------------------------------------------------------------------------------------------------------------------
Leu? gostou? ajudou?! Então cadastre-se, comente, peça, poste, ajude, participe!!!
------------------------------------------------------------------------------------------------------------------
0

#4 Membro offline   faro Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 82
  • Cadastrado: 07-julho 08
  • Sexo:Male
  • Localização:salvador bahia

Postou 16 julho 2008 - 10:15

Ver postckav, em 16/07/2008 - 08:44, disse:

interessante!
como ainda estou começando desconhecia a função, muito bom :D
\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
0

#5 Membro offline   faro Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 82
  • Cadastrado: 07-julho 08
  • Sexo:Male
  • Localização:salvador bahia

Postou 16 julho 2008 - 04:39

Ver postfaro, em 16/07/2008 - 10:15, disse:

Ver postckav, em 16/07/2008 - 08:44, disse:

interessante!
como ainda estou começando desconhecia a função, muito bom :D
\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


Ver postfaro, em 16/07/2008 - 16:38, disse:

Ver postfaro, em 16/07/2008 - 10:15, disse:

Ver postckav, em 16/07/2008 - 08:44, disse:

interessante!
como ainda estou começando desconhecia a função, muito bom :D
\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.
0

Página 1 de 1


Resposta rápida

  

1 usuário(s) está(ão) lendo este tópico
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)