Jump to content
Frederico Zanitti

Link com imagem não "cobre" todo a área da imagem

Recommended Posts

Galera, boa noite!

Sou novo no forum, estou dando uma repaginada no meu site e me deparei com a seguinte situação:

                <div class="col-xs-2 posdiversosIcones">
                    <a href="imagens/diversos/evcoc_festaconfraternizacao_2009.jpg" 
                       rel="lightbox" 
                       title="EV COC - Convite Festa Confraternização, 2009">
                        <img src="imagens/diversos/evcoc_festaconfraternizacao_2009a.png" 
                             class="img-responsive center-block"
                             height="160px"
                             width="160px"
                             border="0">
                    </a>
                </div>

A imagem que está fazendo a função de um botão tem 160px x 160px, porém a área de clic dela não pega o tamanho total da imagem, a área de clic está somente na metade da imagem, tipo 160px x 80px. A metade de baixo da imagem não sofre ação nenhuma, é como se não fosse uma imagem linkada. Será que fui claro em minha explicação? rsrs

Bom, desde já agradeço a ajuda dos colegas.

Share this post


Link to post
Share on other sites

Bom dia,

Pelo que percebi o seu código consiste nisto: https://jsfiddle.net/a5r5b8nz/

O link no elemento a devia ocupar todas a imagem, pois quem define o seu tamanho é o css da imagem. Veja senão tem outra regra de css a anular essa.

Nota: Alguém pode-me ajudar a perceber porque a borda do botão a não engloba toda a imagem?

Share this post


Link to post
Share on other sites

A tag <a> é um inline-element, sendo assim, sua largura é definida pelo conteúdo que ele está envolvendo (no caso a imagem). Dessa forma, como a imagem é um um inline-element também o link só irá funcionar na área onde imagem se encontra porém não em sua altura completa já que não se pode definir altura para elementos inline logo a imagem só tem uma altura visual, então o link só funcionará na altura da sua linha.

Veja :

http://codepen.io/anon/pen/YGPKWG

Note que a borda da tag <a> é inferior ao tamanho da imagem porque ambas as tags são inline-elements mas a imagem ocupa visualmente um espaço maior pois tem uma altura (altura da imagem, não do elemento em si) maior que a linha em que se encontra.

Pra fazer o link funcionar corretamente basta defini-lo como um elemento inline-block assim permitindo elementos de nível block e inline dentro dele e assumindo a altura (se não definida) de seu conteúdo (no caso a imagem) e a imagem como block.
Se manter a imagem com seu display padrão que é inline será gerado um padding no bottom. Uma explicação detalhada sobre o problema pode ser encontrada: aqui.

Solução para o problema:

http://codepen.io/anon/pen/LREPkp

  • +1 1

Share this post


Link to post
Share on other sites

Valeu znatanalvez, a propriedade display: inline-block; já foi suficiente para resolver o problema!

Obrigado!

Agradeço também ao codercss.

Valeu pessoal!

Você provavelmente não possui outros elementos abaixo da imagem caso contrário teria o problema que eu citei.

Share this post


Link to post
Share on other sites

znatanalves


Pelo que percebi a aplicação de elemento inline no interior de outro não permite que seja definida o seu tamanho?

Neste exemplo: https://jsfiddle.net/ededev/fm38weuh/1/ Consigo definir o tamanho da imagem, mas não consigo definir a altura do elemento a, pois como é um elemento inline, estes tipos de elementos não permitem a mudança de largura e altura.

O correcto será aplicara a propriedade display com os valores, correctos, conforme mencionou.

Diga-me s.f. se estou certo?

Obrigado

Share this post


Link to post
Share on other sites

znatanalves

Pelo que percebi a aplicação de elemento inline no interior de outro não permite que seja definida o seu tamanho?

Neste exemplo: https://jsfiddle.net/ededev/fm38weuh/1/ Consigo definir o tamanho da imagem, mas não consigo definir a altura do elemento a, pois como é um elemento inline, estes tipos de elementos não permitem a mudança de largura e altura.

O correcto será aplicara a propriedade display com os valores, correctos, conforme mencionou.

Diga-me s.f. se estou certo?

Obrigado

Sim, exatamente isso.

  • +1 1

Share this post


Link to post
Share on other sites

No meu caso uma parte da minha imagem tava em baixo de outro elemento com transparência #00fff; e z-index maior que o da minha imagem!

 Resolvi assim:

<a href="http://www.abim.inf.br/mudanca-de-sexo-impossibilidade-biologica-revolta-contra-deus/#.W-MT7tVKjIU" rel="nofollow">

  <img src="PRA-LINKS-UM-KB.png" alt="" style="width:152px;height:43px; border:0; top:-685px; left:-5px; position:absolute;opacity:0; z-index:99; ">

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Dinho Nunes LC
      <div align="center" id="subtitulo"> Canais Abertos </div> <div class="ui cards"> <div class="card"> <div class="content"> <a href="globo.html" style="display: block; color: black"> <div align="center"> <div> <img class="ui tiny image" id="imagem_card_casa" src="assets/images/Rede_Globo_2014.png"> <div align="center" id = "nome_time_fora"> <b>Globo RJ</b> </div> </div> Onde "globo.html" seria substituído pelo link que esta em uma tabela do banco de dados.
       
      Já fiz a conexão. E tenho a base de dados pronta.
       
      Motivo pelo qual estou buscando ajuda:
       
      Faço manualmente a mudança de cada link (são mais de 300) diariamente para evitar copias de terceiros. Sendo assim poderia usar um CRUD para facilitar a troca dos links direto no banco de dados.
    • By Renata88
      Bom dia pessoal,
       
      Alguém sabe se tem alguma biblioteca php para extrair imagem de pdf?
      Nas minhas buscas pelo google, eu só consegui encontrar para extrair texto de pdf.
       
       
       
    • By JaCoBBluE
      Bom dia, amigos!
      Antigamente no site de um cliente, eram exibidas as fotos dos associados com base no ip do servidor (exemplo abaixo):
      http://189.45.207.60:3004/imagens/456631.jpg <img class="img-fullwidth" src="http://189.45.207.60:3004/imagens/<?php echo str_replace("\\\SVR-MTG\Imagens\Fotos\\", "", $json_str[$k]['out_foto']); ?>" alt="" width="165" height="219"> Foi encerrado o contrato com a empresa que desenvolveu o site antigo e desde então o link não exibe mais as imagens...
      Alguém pode me dar uma luz do que pode ser, se é necessário liberar alguma porta no modem ou outra coisa?
       
      Muito obrigado!
      Jeferson
    • By Thurcos
      Opa, tudo bem ? sou novo aqui e comecei a usar o Illustrator e o Photoshop para um projeto, acontece que ao criar o logo no Illustrator quando eu pego o logo selecionado no illustrator e mando para PS ele simplesmente perde muito a qualidade, o que posso fazer para solucionar o problema ? 
       
      ps: o problema só acontece quando eu diminuo o tamanho do vetor/imagem no Photoshop, quando eu aumento a resolução ela é excelente, mas no caso eu preciso deixar o logo de canto 
       
      1º imagem : com o simbolo de canto o qualidade esta ruim
      2º imagem : o pouco de zoom que eu dou ela já fica totalmente ilegível 
      3º imagem : eu aumentando ela fica legível 
      4º imagem: ela no Illustrator
       
      sei que um vetor não tem pixel e não é uma imagem, mas tem como eu usar a resolução boa do Illustrator no PS ? 
       
      se eu crio um arquivo no Illustrator o tamanho que eu crio ele interfere quando mando pro Photoshop ?
       
      ps: eu não salvei como imagem nem nada eu apenas selecionei o vetor a arrastei para o Photoshop 




    • By kikekun
      Olá!
      Eu queria fazer um criador de personagens para colocar na web, e tomei como base este código aqui: https://codepen.io/kristenmay/pen/kkkdBr pra fazer em javascript, mas ainda ta limitado pro que eu quero.
      Preciso de um botão que altere mais de uma imagem ao mesmo tempo (por exemplo: pra fazer com que duas imagens de cabelo apareçam ao mesmo tempo, uma na camada da frente, outra na de trás);  um botão para alterar as cores das imagens (até consegui colocar essa barra de HUE, mas ela só muda a cor da primeira imagem, e quando passa, volta pro padrão (esse vermelho que coloquei em todas pra facilitar). mas o ideal mesmo seria um botão especifico pra o tipo de imagem que esteja sendo mudada, por exemplo... o de cabelos mudaria a cor da imagem entre moreno; castanho claro; castanho escuro; branco; loiro claro; loiro escuro; e ruivo... já o botão de cor da pele mudaria entre branco; pardo; asiatico e negro); e um botão de download para as pessoas baixarem seu personagem criado = P Da pra fazer isso? como eu faço? xD (posso tentar postar o codigo em algum lugar se precisar)

      Ta assim:

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.