0

Al pasar el mouse por encima de algún link, pueden observar que abajo a la izquierda del navegador se muestra la url a donde iríamos al hacer click.

Hay alguna forma de ocultar esto pero que el link siga funcionando?

Contexto: Estoy haciendo una pagina que es una única galería de imágenes scrolleable. Para que el scroll del mouse funcione, este tiene que estar posicionado sobre la galería. Las imagenes permiten hacer zoom de las mismas, por eso estan dentro de una etiqueta <a> entonces necesito que los links funcionen, pero el cartelito abajo cambiando de url me hace perder un poco del foco del sitio que es la imagen.

3
  • depende de si querés mantener SEO Commented el 11 abr. 2020 a las 2:32
  • @aloMalbarez veo que en la solucion me plantean lo mismo. Estoy en wordpress justo en este caso. Podria solucionar eso con algun plugin? Solo quiero sacar las url de las imagenes de una galeria, no de todas las url del sitio
    – Agustin G.
    Commented el 11 abr. 2020 a las 2:57
  • siendo wordpress dependiendo del plugin de SEO las imágenes irán referenciadas en el sitemap.xml, algunos incluso le reemplazan la url de attachment por la url del primer post que referencia la imagen ( para evitar urls duplicadas ) Commented el 11 abr. 2020 a las 3:04

3 respuestas 3

5

En el snippet no se nota ( le asigna una url ), la onda es que si no te preocupa que esté optimizado para buscadores le pones el href="" vacío ( en varios navegadores si no hay href no hay click ) y le emulas el enlace con javascript en el evento onclick.

body {
  background: #000;
  color: #fff;
  margin: bottom:16px;
}

.copyfooter {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 21px;
    background: #eee;
    text-align: center;
    font-family: verdana;
    font-size: 10px;
    color: #333;
    line-height: 20px;
}
<body>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
    <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
    <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
    <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
    <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=0");return false;'><img src="https://picsum.photos/200/200/?image=0" /></a>
  <a href="" onclick='window.location.assign("https://picsum.photos/600/600/?image=10");return false;'><img src="https://picsum.photos/200/200/?image=10" /></a>
  <div class=copyfooter>esto es un truco para que no resalte tanto</div>
</body>

4
  • claro, tu respuesta es casi la que busco pero sucede eso, sí quiero optimizarlo para buscadores. De todas maneras, lo estoy haciendo en wordpress, ya esto va como opinion: Puedo "solucionar" el tema del SEO mediante el uso de algún plugin y recurrir a tu solucion?
    – Agustin G.
    Commented el 11 abr. 2020 a las 2:54
  • la mención al SEO es porque los buscadores van a identificar mas fácilmente una galería y sus enlaces a imágenes por el href del <a> que engloba la miniatura Commented el 11 abr. 2020 a las 2:57
  • 1
    con un falso footer podes lograr que no se note tanto ( ponele ver en pantalla completa ) Commented el 11 abr. 2020 a las 3:12
  • @AgustinG. Mira este artículo de un blog que encontré, lo que estás intentando hacer se puede considerar como Cloacking, que es una mala práctica. es.semrush.com/blog/tecnicas-seo-obsoletas
    – user13558
    Commented el 11 abr. 2020 a las 18:23
1

Al estilo de la etiqueta a, se puede poner el tamaño de la fuente a cero (0), y poner el enlace fuera de la imagen. Esto hace que el enlace esté oculto.

Luego de ocultar el enlace, al img y al enlace, se le puede agregar con JavaScript un addEventListener al evento click, y al enlace un event.preventDefault() para evitar la redirección.

Además, al img le agrego con CSS un cursor: pointer; para que al pasar el ratón por arriba de la imagen aparezca una mano.

Código:

var a = document.querySelector("a")
var img = document.querySelector("img")

a.addEventListener("click", function(e){
  e.preventDefault()
  console.log("favicon.ico")
})

img.addEventListener("click", function(e){
    a.classList.toggle("ocultado")
})

document.body.onload = function(){
  a.classList.toggle("ocultado")
}
.mano{
  cursor: pointer;
}
.ocultado{
  font-size: 0;
}
<p>Haz click para ocultar o mostrar el enlace: <img class="mano" src="favicon.ico" /></p>
<a class="mano" href="favicon.ico" >enlace oculto de imagen</a>

2
  • 1
    No es necesario colocar px a la medida que tendrá el font-size, con 0 alcanza
    – user128299
    Commented el 11 abr. 2020 a las 17:25
  • 1
    @BetaM No sabía que se podía hacer eso, gracias, respuesta editada.
    – user13558
    Commented el 11 abr. 2020 a las 17:33
0

Dado que parece inevitable que para un enlace aparezca su dirección en la parte inferior del navegador (al menos en chrome), la alternativa más sencilla puede ser usar otros elementos (span, div...) que simulen a los enlaces usando evento onclick. Véase ejemplo sencillo:

<style>
  .enlace {pointer: pointer; text-decoration: underline;}
</style>
<span onclick="location.href='https://es.stackoverflow.com/'" class="enlace">Enlace</span>

Saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.