Texto sobre imagen sin link en php
Hola,
Estoy haciéndome un blog personal a partir de esta plantilla de wordpress http://imbalance.wpshower.com/ Quería que al pasar el ratón sobre las imágenes se viese solo el título, hasta ahí todo bien porque ya lo he conseguido.
El problema es que al pasar el ratón sobre una imagen hay un momento en el que desaparece el link al post, porque hay un texto encima. Da igual que el texto en sí esté enlazado al post o no, porque desaparece el link de todas formas (si está enlazado desaparece solo en una pequeña zona alrededor del texto). No sé si me explico muy bien porque no soy diseñadora ni programadora.
En resumen, ¿hay alguna forma de poner el link en la imagen sin que el texto que está encima afecte al link? Creo que el fragmento de código es este:
<?php
if ( has_post_thumbnail() ) { ?>
<?php
$imgsrcparam = array(
'alt' => trim(strip_tags( $post->post_excerpt )),
'title' => trim(strip_tags( $post->post_title )),
);
$thumbID = get_the_post_thumbnail( $post->ID, 'background', $imgsrcparam ); ?>
<div class="preview"><a href="<?php the_permalink() ?>"><?php echo "$thumbID"; ?></a></div>
<?php } else {?>
<div class="preview"><a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_url'); ?>/images/default-thumbnail.jpg" alt="<?php the_title(); ?>" /></a></div>
<?php } ?>
<div class="article-over">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
</div>
Usuario desconocido
sergiogmz
Gracias, sergiogmz, no lo he probado, pero creo que entiendo lo que me dices y que podría funcionar.
Usuario desconocido
Creo que quieres es que todo parezca un bloque.
Utilizaría el contenedor de ambos, si no existe lo crearía, es decir, un div que dentro tenga todo lo que quiero que parezca un enlace.
A ese div con CSS se le pone el curso de la mano, con javascript/jquery un evento onclick para simular el enlace y también con javascript/jquery o con atributos HTML dar un title para ese div.
Usuario desconocido
Csardelacal
Cuando la mano se quita no funciona el link. Lo que pasa, a ver si consigo explicarlo bien, es que hay el mismo link dos veces (una en la imagen y otra en el texto que aparece al pasar el ratón sobre la imagen). Los dos links funcionan, pero si colocas el ratón justo sobre la zona que rodea al texto no funciona ni el link del texto ni el de la imagen, lo que queda un poco raro. He probado a quitar el link del texto, pero entonces desaparece el link de la imagen en toda la zona del texto.
csardelacal
Hola!
Lo que puedes hacer es añadir en las CSS el cursor: pointer tanto para los link como la imagen. Recuerda que hay navegadores (me pasa a veces en webkit y mozilla) que al modificar el DOM quitan el cursor de la mano.
Una pregunta, cuando la mano se quita el link sigue funcionando al hacer click?
Un saludo
Usuario desconocido
guitobon
Creo que me he explicado fatal y que no estamos hablando de lo mismo. No me refiero al título de la imagen, me refiero al título del post. Es decir, hay una imagen en la que al pasar el ratón por encima aparece el título del post al que lleva, como tanto la imagen como el título están enlazados al post, el cursor de la mano desaparece en las zonas de alrededor del texto, y si saco el link del texto desaparece en todo el texto. Lo que quiero es que el cursor de la mano no desaparezca.
guitobon
El comportamiento que describes es el normal de toda la vida cuando una imagen llefa el atributo ALT. Si buscas un comportamiento similar pero "mas elaborado", te recomiendo un componente popup o baloon como por ejemplo, los que provee jquery.ui, o bien algun pluggin que ta lo haga.