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 LucasLV
      Olá.
      Tenho um site onde as imagens são geradas através de um arquivo PHP - utilizo esse método para retornar imagens webp ou jpg - e vi que o navegador não utiliza, ou não salva em cache, as imagens geradas dessa forma.
      Já as onde informo o caminho completo da imagem com a extensão, aparecem como utilizadas do cache.

      Esse comportamento é normal quando as imagens são geradas desse jeito ou é por não ter feito nenhuma configuração de cache no arquivo PHP que gera as imagens?
       
      Coloquei uma imagem do resultado exibido no navegador.

    • By Staypler
      Galera, sou novo no fórum, estou colocando o tópico nessa categoria porque não sabia bem onde classificar.
       
      Mas é o seguinte. Eu quero criar um link em que dentro dele tenha por exemplo mais outros 10 links.
      Daí quando clico nesse link eu sou redirecionado aleatoriamente para qualquer um desses 10 links, e toda vez que eu der f5 redirecione aleatorio para qualquer uma dos 10 e assim por diante.
       
      Alguém pode me ajudar com isso?
       
      No caso eu quero utilizar em um site que estou criando, e daí a pessoa clica no botão e é enviada para qualquer um dos 10 artigos que tenho, por exemplo.
    • By crhistianosa
      Tenho uma tabela no google planilhas (google sheets) e criei uma página html com uma tabela para exigir o conteúdo dessa planilha. Ocorre que há uma coluna cujas células contêm link. Na tabela no google aparece como link e clicável. Contudo, na página html não. Como faço para que esse contéudo apareça como link na tabela html?
    • By Wallcrawler
      Olá pessoal tudo bem? Estou tentando fazer a cópia de uma imagem que está disponível na web e salvar em uma pasta no meu projeto. Essa imagem está sob protocolo SSL mas navegador consegue acessá-la normalmente. Mas o meu script php é bloqueado, e não entendo o porquê.
       
      Segue o código que estou usando:
      <?php //error_reporting(E_ALL ^ E_DEPRECATED); //ini_set('display_errors', 1); //die('Script travado!'); $start = microtime(true); set_time_limit(0); function save_image($inPath,$outPath) { //Download images from remote server $in = fopen($inPath, 'rb'); $out = fopen($outPath, 'wb'); while ($chunk = fread($in,8192)) { fwrite($out, $chunk, 8192); } fclose($in); fclose($out); } include_once ($_SERVER['DOCUMENT_ROOT'] . '/grpi/include/classes/Rpi.class.php'); include_once ($_SERVER['DOCUMENT_ROOT'] . '/grpi/include/functions.class.php'); $func = new FuncoesAuxiliares(); $rpi = new Rpi(); if(!isset($_GET['num_processo'])) { $rows = $rpi->Consulta('select num_processo, classe, especificacao from processos order by num_processo ASC limit 1'); } else { $rows = $rpi->Consulta("select num_processo, classe, especificacao from processos where num_processo > '" . $_GET['num_processo'] . "' order by num_processo ASC limit 1"); } $registros = 0; $arrayInsert = array(); $qtd_caracteres_total = 14; foreach ($rows as $rs) { //$rs['num_processo'] $zeros = ''; $qtd_char_processo = strlen($rs['num_processo']); //Fill zeros for($i=0; $i < ($qtd_caracteres_total - $qtd_char_processo); $i++) { $zeros .= '0'; } echo('BR5' . $zeros . $rs['num_processo'] . '<br>'); $url = 'http://www.tmdn.org/tmview/trademark/image/BR5' . $zeros . $rs['num_processo']; //Aqui tento acessar a imagem e salvar na pasta correspondente save_image($url, __DIR__ .'/logo/' . $rs['num_processo'] . '.jpg'); //copy('https://www.tmdn.org/tmview/trademark/image/BR5' . $zeros . $rs['num_processo'], __DIR__ .'/logo/' . $rs['num_processo'] . '.jpg'); $processo = $rs['num_processo']; $registros++; } $registros = number_format($registros, 0, ',', '.'); // Display Script End time $time_end = microtime(true); //dividing with 60 will give the execution time in minutes other wise seconds $execution_time = ($time_end - $start)/60; //execution time of the script echo '<b>Total Execution Time:</b> '. $execution_time .' Mins <hr><br><br>Registros: ' . $registros . '<br><br>'; echo("<a href='down_logo.php?num_processo=" . $processo ."' target='_self'>Próxima página</a><br><br>"); ?> O erro retornado é o seguinte:
       
      Warning: fopen(): SSL: Connection reset by peer in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 10

      Warning: fopen(http://www.tmdn.org/tmview/trademark/image/BR500000825642590): failed to open stream: HTTP request failed! in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 10

      Warning: fread() expects parameter 1 to be resource, boolean given in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 12

      Warning: fclose() expects parameter 1 to be resource, boolean given in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 16
       
      Só que se você tentar acessar o endereço no browser, diretamente, a imagem aparece:
       
      https://www.tmdn.org/tmview/trademark/image/BR500000825642590 
       
      Onde posso estar errando? Obrigado pela atenção de todos.
    • By Artur Mendonça
      Olá amigos.
      espero que estejam todos bem.
       
      Estou tentando criar uma galeria de imagens e colocar nestas um botão para votação (Gosto como no Facebook).

      Já consegui criar a galeria e colocar o Like nas imagens, mas acontece que quando  as imagens passam para a linha de baixo o botão Like não acompanha a imagem.
       
      Junto uma imagem para exemplificar como está e como deveria ser.
       
      O CSS está assim
      h1 { text-align: center; color: forestgreen; margin: 30px 0 50px; } .container h2 { text-align: center; color: rgb(8, 8, 8); margin: 30px 0 50px; } .gallery { margin: 10px 50px; padding-right: 0px; padding-left: 0px; } .gallery img { width: 230px; padding: 0px; opacity: 0.5; filter: grayscale(10%); transition: 1s; margin-top: 10px; margin-left: 10px; margin-bottom: 10px; margin-right: 0px; border: 2px solid #ccc; border-radius: 10%; } .ilike { display: grid; border-radius: 10%; box-sizing: border-box; text-align: left; padding: 15px; font-size: 20px; vertical-align: top; position: absolute; z-index: 1000; margin-top: 10px; margin-left: 10px; overflow: hidden; color: white; } O código da página da galeria de fotos está assim:
      <div class="gallery"> <?php $sql = "SELECT * FROM tbl_gallery where aid=$aid"; $num_rows = mysqli_num_rows(mysqli_query($conectar, $sql)); $result = mysqli_query($conectar, $sql); while ($row = mysqli_fetch_array($result)) { $gimage = $row['gimages']; $fotoid = $row['gid']; $likes = $row['likes']; ?> <a href="páginapararegistarovoto" ?> "><i class="far fa-thumbs-up ilike" alt="Vote"> <?php echo $likes; ?> </i></a> <i class="inum" > <?php echo "Foto " . $fotoid; ?> </i> <?php echo "<a href='../fotos/$gimage' data-lightbox='mygallery' data-title='Foto n.º: $fotoid'><img src='../thumbnails/$gimage' class='pic'></a>"; } ?> </div>  
       
       

×

Important Information

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