mostrar imagen al pasar el ratón por encima

[rodrypaladin]

Hola foro vecino!!! Desconozco si lo que intento hacer se puede hacer en css pero ya que no estoy seguro mejor lo pregunto por aquí.

Estoy creando una base de datos con información sobre cartas de un juego, cuando tenga la base de datos mostrará una tabla con una lista, pero al poner el ratón sobre el nombre de la carta me gustaría que mostrara la imagen de dicha carta sin necesidad de hacer click sobre ella.

Un ejemplo claro es el siguiente: http://es.hearthhead.com/tooltips

justo ahí si ponéis el ratón donde pone: Gelbin Mekkatorque veréis como aparece la imagen de esa carta.

Esa web ofrece un script para implementarlo pero obviamente al hacer click irian a su web y eso no es lo que necesito.

Se puede realizar ? ¿ Como se realizaría si no es muy difícil ?

Un saludo y gracias de antemano!!!

[pzin]

Saludos rodry.

Ahí usan JavaScript para conseguir ese efecto. En CSS se podría hacer, lo de mostrar una imagen al pasar por encima de un enlace de esta forma:

Código HTML:

<a href="#">
  meooow
  <img src="gato.jpg">
</a>
 

Sería un enlace que contiene una imagen.

Código CSS:

a {
  position: relative;
}
 
img {
  position: absolute;
  top: 100%;
  left: 100%;
  display: none;
}
 
a:hover img {
  display: block;
}
 

Esa imagen no se muestra, sólo hasta que se pase por encima del enlace.



Lo malo con esto es que tienes que poner la imagen dentro del enlace, y la página que dices creo que lo cargan mediante AJAX toda la información que muestran.

[Benderzuelo]

Hola, a parte de como dice pzin existe un plugin llamado Jquery Tooltip y aunque es para mostrar texto también lo he visto con imágenes alguna vez.
;)

[rodrypaladin]

Y como siempre pzin... Muchisimas gracias, voy a intentar probarlo a ver si me funciona!!

[rodrypaladin]

pzin!!! tu ayuda me funcionó perfectamente, pero creo que entra en conflico con algo...me explico

ahora cuando inserto alguna imagen dentro de una tabla que muestro en la misma página estas no aparecen.

El codigo que me diste funciona perfecto pero puede ser que entre en conflicto cada vez que intento añadir alguna imagen que si que quiero que se muestre siempre ??

[pzin]

Si lo pusiste tal cual si. Porque ahí se seleccionan todas las imágenes.

Usa alguna clase para diferenciarlo, por ejemplo:

Código HTML:

<a class="con_imagen" href="#">
  meooow
  <img src="gato.jpg">
</a>
 

Código CSS:

a.con_imagen {
  position: relative;
}
 
a.con_imagen img {
  position: absolute;
  top: 100%;
  left: 100%;
  display: none;
}
 
a.con_imagen:hover img {
  display: block;
}
 

Será por esto lo del otro hilo ¿no?

[rodrypaladin]

Si que se trata de eso, pero ahora tengo un problema!! tengo tantas "" y '' en el código php que al añadir el estilo parece que entran en conflicto con otras "" o '' y no muestra nada una vez guardo..

Me explico. Ahora mismo lo tengo así

Código PHP:

echo "  <td align=left><a href='#'>".$fila['nombre']."<img src='".$fila['rutaimg']."'></a></td>";
 

Añadiendo la clase se quedaría así

Código PHP:

echo "  <td align=left><a class="con_imagen" href="#">".$fila['nombre']."<img src='".$fila['rutaimg']."'></a></td>";
 

Pero no funciona, dejandolo así no funciona el código. Como véis hay una parte a la derecha en gris, se ve que no funciona. Tiene que haber algo mal de las comillas pero no lo localizo!!


EDITO: SOLUCIONADO: Ha quedado así

Código PHP:

echo "  <td align=left>"."<a class='con_imagen' href='#'>".$fila['nombre']."<img src='".$fila['rutaimg']."'></a></td>";
 

[marlanga]

PHP tiene un caracter de escape para concatenar comillas.

Código PHP:

$variable="\"hola mundo\"";
 

Personalmente, jamás imprimo el HTML como haces tú.
Soy más de :

Código PHP:

<td align="left">
    <a class="con_imagen" href="#"><?php echo $fila['nombre']; ?><img src="<?php echo $fila['rutaimg']; ?>"></a>
</td>
 

Y así, además de tener mas o menos separado el HTML de la lógica del PHP, no necesito usar el caracter de escape.

Me imagino que habrás hecho una consulta, y con un while estás recorriendo los fetchs imprimiendo resultados y pintando HTML, ¿no?
Tampoco lo haría así. Mejor:

Código PHP:

$datos=array();
$query = "SELECT * FROM tabla";
$result = $mysqli->query($query);
while($fila = $result->fetch_assoc())
{
    $datos[] = $fila;
}
 

Y luego donde vayas a imprimir el HTML:

Código PHP:

<table>
<?php
foreach ($datos as $fila) { ?>
<td align="left">
    <a class="con_imagen" href="#"><?php echo $fila['nombre']; ?><img src="<?php echo $fila['rutaimg']; ?>"></a>
</td>
<?php } ?>
</table>
 

Así queda separado la lógica de la aplicación de la lógica de la vista, y todos viviremos felices comiendo perdices.

[rodrypaladin]

Gracias por el consejo, veré si puedo implementarlo con tu método que seguramente sea mejor, pero mis conocimientos son básicos, pero se agradece mucho.

Por otro lado pzin!!! puedes ver el ejemplo aqui http://www.guiashearthstone.com/bdca...uevoserver.php de como va quedando. Por otro lado cuando pongo el ratón encima del nombre de la carta y me muestra la imagen perfectamente lo hace justo debajo del nombre, no podría subirse un poco para que aparezca más centrado al nombre ?? Si lo pruebas en los que están más abajo, ves que se tapa una parte de la carta

Mil gracias!

[pzin]

Si, sólo tendrías que añadirle a la imagen algo así:

Código CSS:

transform: translateY(-50%)
 

Con prefijos propietarios quedaría algo como:

Código CSS:

img {
  position: absolute;
  top: 50%;
  left: 100%;
  display: none;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
 

[rodrypaladin]

Perfecto!!! Mil gracias!!!