0

Vamos por partes, estou a fazer um site onde vou ler um URL da base de dados e a seguir vou usá-lo em uma imagem, ao clicar nela(imagem) vai abrir esse URL (dentro de um iframe ou em um novo separador).

No código, tenho uma página usando HTML e PHP onde mostro a imagem com o URL da hiperligação visível:

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <div> 
    <?php
        include ("connection.php");

        $sql = "SELECT * FROM table";
        $result = $conn->query($sql);

        if ($result->num_rows > 0) {
            // output data of each row
            while($row = $result->fetch_assoc()) {
                echo "<div class=\"gallery\">";
                echo "  <a target=\"iframe1\" href=\"".$row["url"]."\" onclick=\"openiframe()\">";
                echo "    <img src=\"images\\".$row["image"]."\" width=\"600\" height=\"400\">";
                echo "  </a>";
                echo "  <div class=\"desc\"><a href=\"".$row["url"]."\" target=\"_blank\">".$row["name"]."</a></div>";
                echo "</div>";
            }
        } else {
            echo "0 results";
        }

        $conn->close();
    ?> 
    </div>
</body>
</html>

O resultado do código anterior é algo como isso: inserir a descrição da imagem aqui

Até aqui tudo bem, agora o que eu pretendia era não ser visível o URL, na imagem seguinte assinalei o que falo: inserir a descrição da imagem aqui

Existe forma de ocultar o URL usando por exemplo PHP ou alguma outra forma?

2 Respostas 2

1

Antigamente, muito antigamente, existia um método para isso: window.status. Bastava você colocar no link algo como onmouseover="window.status='Olá'" que ao passar o mouse sobre o link aparecia "Olá" na barra de status do navegador em vez do link no href.

Porém, esse método foi abolido e não tem mais suporte nos navegadores mais modernos.

Uma solução é usar o método window.open com onclick abrindo a URL numa nova aba (alguns navegadores irão abrir em nova janela):

<a href="javascript:void(0)" onclick='window.open("destino.html","_blank")'>link</a>

Desta forma irá aparecer "javascript:void(0)' no navegador em vez da URL, e a URL "destino.html" será aberta em uma nova aba/janela ("_blank").

Usando uma função e excluindo o script nas "opções de programador" (developers tools):

<a href="javascript:void(0)" onclick='abrirURL("qualquercoisa")'>link</a>

ou

<a href="javascript:abrirURL('qualquercoisa')">link</a>

Script com um id:

<script id="novaJanela">
function abrirURL(i){
    if(i == "qualquercoisa"){
        i = "destino.html";
    }
    window.open(i,i);
}

// aqui eu excluo virtualmente a tag script da página pelo id "novaJanela"
// não há problema em excluir essa tag, ela continuará funcionando
// porque já foi inserida na memória após o carregamento da página
window.onload = document.getElementById("novaJanela").outerHTML = '';
</script>
8
  • fiz uma edição na pergunta pois não se notava muito bem a outra seta, além disso preciso também de esconder no "código" o URL
    – Tmc
    Commented 19/10/2017 às 16:31
  • @Tmc Atualizei a resposta mudando o href de "#" para "javascript:void(0)"
    – Sam
    Commented 19/10/2017 às 16:33
  • resultou o que da forma que fala para mudar não aparecer o URL ao fundo da página no entanto falta nas "opções de programador" veja na imagem da pergunta o que falo se não me perceber. Tenho duas setas na imagem.
    – Tmc
    Commented 19/10/2017 às 16:48
  • @Tmc Entendi, vc quer ocultar nos dois lugares?
    – Sam
    Commented 19/10/2017 às 16:51
  • exatamente, precisava disso, existe forma?
    – Tmc
    Commented 19/10/2017 às 16:52
0

Você pode usar a função file_get_contents, e nela passar a URL da sua imagem. A função irá retornar um base64 da sua imagem, então é só você colocar esse base64 dentro da tag IMG, ficaria mais ou menos assim:

$base64 = file_get_contents('caminho_da_sua_imagem');
echo "<img src=\"data:image/png;base64, ".$base64."\">";

Lembre-se que para cada extensão, é necessário informar no SRC:

  • PNG = <img src="data:image/png;base64, seu_base64">
  • JPG = <img src="data:image/jpg;base64, seu_base64">
  • GIF = <img src="data:image/gif;base64, seu_base64">
2
  • eu não queria escoder o URL da imagem mas sim o URL da hiperligação da imagem como, está identificado na imagem que postei
    – Tmc
    Commented 19/10/2017 às 14:44
  • isso também pode ser usado para um URL?
    – Tmc
    Commented 19/10/2017 às 16:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .