Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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

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.

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

  • Conteúdo Similar

    • Por 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.

    • Por 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.
    • Por 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?
    • Por 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.
    • Por Alberto Nascimento
      Como consigo salvar o "novo nome" da imagem que foi enviada para o servidor por meio de UPLOAD no mesmo registro em que estão sendo salvos os dados do formulário no banco de dados através do PHP.
      Consigo salvar os campos do formulário, mas o nome que é gerado ao enviar a imagem, não estou conseguindo.
       
      <?php include 'conecta_mysql.inc'; if(isset($_FILES['arquivo']['name']) && $_FILES["arquivo"]["error"] == 0) { echo "<center>Você enviou o arquivo: <strong>" . $_FILES['arquivo']['name'] . "</strong><br /></center>"; echo "<center>Seu tamanho é: <strong>" . $_FILES['arquivo']['size'] . "</strong> Bytes<br /><br /></center>"; $arquivo_tmp = $_FILES['arquivo']['tmp_name']; $nome = $_FILES['arquivo']['name']; $extensao = strrchr($nome, '.'); $extensao = strtolower($extensao); if(strstr('.jpg;.jpeg;.gif;.png', $extensao)) { $novoNome = md5(microtime()) . '.' . $extensao; $destino = 'imagens/' . $novoNome; if( @move_uploaded_file( $arquivo_tmp, $destino )) { echo "<br>"; echo "<img src=\"" . $destino . "\" />"; echo "<br>"; } else echo "Erro ao salvar o arquivo. Aparentemente você não tem permissão de escrita.<br />"; } else echo "Você poderá enviar apenas arquivos \"*.jpg;*.jpeg;*.gif;*.png\"<br />"; } else { echo "<center><h1>Você não enviou nenhum arquivo!</h1></center>"; echo "<center><br><h3><a href='javascript:window.history.go(-1)'>Clique aqui para volta.</a></h3></center>"; } $codphoto = $_POST['codphoto']; $nome = $_POST['nome']; $datafotografia = $_POST['datafotografia']; $photography = $_POST['novoNome']; $sql = "INSERT INTO photograph VALUES"; $sql .= "( '$codphoto', '$nome', '$datafotografia', '$photography' )"; if ($conexao->query($sql) === TRUE) { echo "<center> <h2> Obrigado !! Envio realizado com sucesso !! </h2></center>"; echo "<center><br><h3><a href='LINK_SITE'>ENVIAR OUTRA FOTOGRAFIA</a></h3></center>"; } else { echo "Erro: " . $sql . "<br>" . $conexao->error; } $conexao->close();  
×

Informação importante

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