Use el título de anclaje en lugar del título de la imagen

4 minutos de lectura

Si tengo una imagen en un ancla, ¿cómo puedo hacer que aparezca el título del ancla y no el del elemento imagen?

Sé que podría eliminar el atributo de título con javascript, pero espero que haya una solución más simple.

Por ejemplo

<a title="Anchor Title"><img title="Image Title" /></a>

Si pasa el cursor sobre el enlace, se mostrará “Título de la imagen”.

lo que he probado

Con CSS, pensé que tal vez podría cambiar los índices z para empujar el ancla al frente, o tal vez podría mostrar el ancla como un bloque y darle el ancho y alto de la imagen. Esto no funcionó. Ver JSFiddle aquí.

Esperaba encontrar una solución con CSS o quizás HTML.

La razón por la que quiero hacer esto es porque estoy trabajando con WordPress, escupiendo publicaciones y miniaturas. Quiero que las miniaturas se vinculen a una página determinada y quiero tener un título universal para el enlace, pero está tomando el título de las miniaturas individuales. Aquí está el código de WordPress/PHP:

<a href="https://stackoverflow.com/questions/13828571/<?php the_permalink(); ?>" title="Click to see Featured Stories">
<?php the_post_thumbnail(); ?>
</a>

  • quitar el titulo de la imagen..? :/

    – fideos

    11 de diciembre de 2012 a las 21:17


  • @popnoodles WordPress requiere que las imágenes tengan títulos cuando las carga en la biblioteca de medios. Espero darle esto a un cliente (por lo que no confío en que carguen a través de FTP y especifiquen imágenes a través de URL). 🙂

    – bozdoz

    11 de diciembre de 2012 a las 21:18

  • lo que dijo @popnoodles podría funcionar bien, afaik solo se requiere un “alt”. Además, podría funcionar si agrega display: block en su CSS para el enlace.

    – Berry Langerak

    11 de diciembre de 2012 a las 21:19

  • Que requiera un título no significa que tenga que salir en el HTML. steveax ya escribió cómo eliminarlo antes que yo.

    – fideos

    11 de diciembre de 2012 a las 21:21


  • también hay tal cosa como pointer-events: none

    – EricG

    11 de diciembre de 2012 a las 21:21

Pase una cadena vacía en el title atributo en el $attr matriz en el miniatura:

<?php the_post_thumbnail('thumbnail', array('title' => '')); ?>

  • Me parece la mejor solución.

    – Lenin

    11 de diciembre de 2012 a las 21:23

  • Una buena solución para WordPress. Estaba buscando una solución más general. +1

    – bozdoz

    11 de diciembre de 2012 a las 21:26

  • La mejor solución: mi respuesta es independiente del marco porque no sé nada sobre WP [luckily!].

    – onda de luna99

    11 de diciembre de 2012 a las 21:32

Esto ofrece una solución general, sin tener en cuenta WordPress. CSS evita que aparezca el título.

HTML:

<a title="Anchor Title">
    <img title="Image Title" src="http://codepen.io/images/logo.png" />
</a>

Con CSS:

a {
  display: inline-block;
}

img {
  pointer-events: none;
}

Resultado

ingrese la descripción de la imagen aquí

Ver Ejemplo de CodePen

  • CSS es mi solución preferida. Gracias.

    – bozdoz

    12 de diciembre de 2012 a las 16:23

solo ponle un transparente <span> sobre la imagen, con fondo transparente y el atributo de título deseado.

Margen

<a href="#">

    <img title="Image Title" />
    <span title="Div Title"></span>    

</a>​

CSS

img { width:50px;height:50px;background:blue; }
a, img { position:absolute; } 
a { z-index:4;display:block;width:50px;height:50px; }
img { z-index:2; }
​span{
    top:0;
    left:0;
    position:absolute;
    width:50px;
    height:50px;    
    display:block;
    z-index:100;
    background-color:transparent;
}​

Yo solo bifurcó tu violínfunciona en Chrome al menos.

  • Estaba pensando en algo como esto. Realmente es solo el orden de los elementos lo que hace que un título tenga prioridad.

    – bozdoz

    11 de diciembre de 2012 a las 21:26

  • Esto es realmente pobre, considerando la alternativa de calidad. Pero bien. No lo recomendaría.

    – EricG

    11 de diciembre de 2012 a las 21:32


Creo que eliminar el atributo de título img es la solución más simple de todas.

http://jsfiddle.net/hnmuj/

CSS:

#foo {
    position:relative;
    display:block;    
}
#foo span {
    position:absolute;
    width:100%;
    height:100%;
    z-index:1;
    top:0;
    left:0;
    display:block;   

} ​

HTML:

<a title="Anchor Title" id="foo">
    <span></span>
    <img title="Image Title" />
</a>​

  • Solución interesante, pero el lapso cubre el ancho de toda la página. Espero conflictos con otros elementos en la página.

    – bozdoz

    11 de diciembre de 2012 a las 21:29

  • ¿Configuraste el a ser – estar display:block y position:relative?

    – Belladona

    11/12/2012 a las 21:30

  • Solución interesante, pero el lapso cubre el ancho de toda la página. Espero conflictos con otros elementos en la página.

    – bozdoz

    11 de diciembre de 2012 a las 21:29

  • ¿Configuraste el a ser – estar display:block y position:relative?

    – Belladona

    11/12/2012 a las 21:30

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad