Ir para conteúdo
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.

Compartilhar este post


Link para o post
Compartilhar em outros 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?

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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; ">

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por riru
      Boa noite pessoa! Como vão?
      Meu site foi feito em laravel e está rodando em hospedagem compartilhada, tudo funciona bem, menos as imagens quando são feitos upload (aparecem um x e não carrega imagem), 
      O site grava as fotos corretamente no diretório public/uploads e carrega no diretório raiz a pasta uploads (onde não tem nenhuma imagem). Como faço para trocar a instrução de puxar a imagem em public/uploads ao invés da pasta uploads?
      abs.
    • Por RafsFernandes
      Boa noite.
       
      Estou com a seguinte ideia em um projeto: https://i.imgur.com/ylrv3Zc.png.
       
      Gostaria de saber se há alguma forma de mapear as folhas, para que quando o usuário clicar, redirecionar para outra página.
       
      Já tentei mapear pela tag <map>, porém, o mapeamento não fica responsivo. 
       
      Lembrando que a imagem está unificada, conforme código abaixo:
      <div class="container"> <div class="descricoes text-center"> <h1 class="text-nomes-main">Clique nas folhas para selecionar a Deficiência.</h1> <img src="../contents/imagens/folhas_deficiencia.png" width="500" height="500" class="img-responsive img-centro"> </div> </div>  
    • Por RafsFernandes
      Boa noite.
       
      Estou com a seguinte ideia em um projeto: https://i.imgur.com/ylrv3Zc.png.
       
      Gostaria de saber se há alguma forma de mapear as folhas, para que quando o usuário clicar, redirecionar para outra página.
       
      Já tentei mapear pela tag <map>, porém, o mapeamento não fica responsivo. 
       
      Lembrando que a imagem está unificada, conforme código abaixo:
      <div class="container"> <div class="descricoes text-center"> <h1 class="text-nomes-main">Clique nas folhas para selecionar a Deficiência.</h1> <img src="../contents/imagens/folhas_deficiencia.png" width="500" height="500" class="img-responsive img-centro"> </div> </div>  
    • Por RafsFernandes
      Boa noite.
       
      Estou com a seguinte ideia em um projeto: https://i.imgur.com/ylrv3Zc.png.
       
      Gostaria de saber se há alguma forma de mapear as folhas, para que quando o usuário clicar, redirecionar para outra página.
       
      Já tentei mapear pela tag <map>, porém, o mapeamento não fica responsivo. 
       
      Lembrando que a imagem está unificada, conforme código abaixo:
      <div class="container"> <div class="descricoes text-center"> <h1 class="text-nomes-main">Clique nas folhas para selecionar a Deficiência.</h1> <img src="../contents/imagens/folhas_deficiencia.png" width="500" height="500" class="img-responsive img-centro"> </div> </div>  
    • Por RafsFernandes
      Boa noite.
       
      Estou com a seguinte ideia em um projeto: https://i.imgur.com/ylrv3Zc.png.
       
      Gostaria de saber se há alguma forma de mapear as folhas, para que quando o usuário clicar, redirecionar para outra página.
       
      Já tentei mapear pela tag <map>, porém, o mapeamento não fica responsivo. 
       
      Lembrando que a imagem está unificada, conforme código abaixo:
      <div class="container"> <div class="descricoes text-center"> <h1 class="text-nomes-main">Clique nas folhas para selecionar a Deficiência.</h1> <img src="../contents/imagens/folhas_deficiencia.png" width="500" height="500" class="img-responsive img-centro"> </div> </div>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.