登录 | 注册 | FAQ
Anonymous

Mapear imagem usando CSS

+ 发表回复

5 篇帖子 分页: 1 / 1


Mapear imagem usando CSS

altair » 周一 5月 07, 2012 9:06 pm

Olá pessoal, estou fazendo um template para um blog, e usei o background-image para cabeçalho e rodapé da página. No rodapé, por exemplo, coloquei a imagem do logo do facebook e uma imagem do gimp (software que usei para fazer a imagem do template).

Eu quero linkar essas duas imagens presentes na única imagem de rodapé. Segue trecho do código:

1. CSS (situação atual):

代码: 全选
<style type="text/css">
   body {
      margin-bottom:50px;
      margin: 0;
      padding: 0;
   }
   a {
      position: absolute;
      display: block;
      text-decoration: none;
   }
   a.gimp {
      widht: 63px;
      height: 55px;
      right: 22.5%;
      top: 132.5%;
   }
   a.face {
      width: 47px;
      height: 60px;
      left: 23%;
      top: 132.5%;
   }
   a:hover {
      border: none;
   #footer {
      clear: both;
      position: relative;
      background-image: url("images/footer.png");
      background-repeat: no-repeat;
      background-position: bottom;
      widht: 781px;
      height: 112px;
      margin: 0 auto;
   }
   </style>


2. HTML:
代码: 全选
<body>
   <div id="tudo">
      <div id="header">
      </div>
      <div id="main">
      </div>
      <div id="footer">
      <a href="http://www.gimp.org" target="_blank" class="gimp"></a>      
      <a href="http://www.facebook.com" target="_blank" class="face"></a>
      </div>
   </div>
</body>
</html>


Desde já agradeço a todos que se dispuserem a ajudar.
头像

altair

  • 帖子: 7
  • 注册: 周一 5月 07, 2012 8:58 pm

Re: Mapear imagem usando CSS

altair » 周一 5月 07, 2012 9:14 pm

Ah esqueci-me de dizer que somente o link do facebook está funcionando, não entendo o porquê do gimp não funcionar, o do gimp só funciona quando ponho caracteres entre as tag <a></a>.
头像

altair

  • 帖子: 7
  • 注册: 周一 5月 07, 2012 8:58 pm

Re: Mapear imagem usando CSS

XainPro » 周三 5月 09, 2012 5:43 am

substituí-lo CSS com esta que deve funcionar
代码: 全选
<style type="text/css">
   body {
      margin-bottom:50px;
      margin: 0;
      padding: 0;
   }
   a {
   position: absolute;
   display: block;
   text-decoration: none;
   width: 44px;
   }
   a.gimp {
      widht: 63px;
      height: 55px;
      right: 22.5%;
      top: 132.5%;
   }
   a.face {
      width: 47px;
      height: 60px;
      left: 23%;
      top: 132.5%;
   }
   a:hover {
      border: none;
   #footer {
      clear: both;
      position: relative;
      background-image: url("images/footer.png");
      background-repeat: no-repeat;
      background-position: bottom;
      widht: 781px;
      height: 112px;
      margin: 0 auto;
   }
   </style>
头像

XainPro

  • 帖子: 3933
  • 注册: 周五 2月 17, 2012 8:10 pm

Re: Mapear imagem usando CSS

altair » 周三 5月 09, 2012 3:43 pm

Grande XainPro, funcionou mesmo. Muito obrigado e parabéns, não sei se vc é o administrador do fórum, mas é o usuário mais ativo, excelente trabalho!
头像

altair

  • 帖子: 7
  • 注册: 周一 5月 07, 2012 8:58 pm

Re: Mapear imagem usando CSS

XainPro » 周四 5月 10, 2012 7:46 pm

Não, eu não sou administrador.
eu sou apenas um usuário.
se sentir feliz que é resolver o problema
头像

XainPro

  • 帖子: 3933
  • 注册: 周五 2月 17, 2012 8:10 pm


+ 发表回复

分页: 1 / 1