como colocar este codigo

[visona]

quiero meter este codigo
<a class=Ntooltip href="#">
el texto visible
<span>
... el texto oculto (cualquier código HTML) ......
</span>
</a>
dentro de este

Código PHP:

  <?php do { ?>
      <table width="100" height="120" border="0" align="center" background="../images/100.gif">
<tr>
          <td width="101" align="center" valign="top"><span class="margenimagenes"><a href="detalle.php?detalle=<?php echo $row_lado['id_producto']; ?>"><img src="<?php echo $row_lado['imagen']; ?>"   alt= ""
 name="imagen" width="85" height="70" border="0" align="top" class="imagenes_horizontal" id="imagen3" /></a></span></td>
        </tr>
          </table>
          <?php } while ($row_lado = mysql_fetch_assoc($lado)); ?>   

Pero por mas que intento colocarlo no me sale.
Alguna idea u otra forma de hacerlo.
Un saludo

[abimaelrc]

Podrias detallar lo que quieres hacer exactamente y donde lo quieres colocar en ese codigo. Porque estoy tratando de entender lo que quieres hacer pero me pierdo cuando leo el codigo

[kseso?]

El nombre de la clase debe ir entrecomillado:
<a class="Ntooltip" href="#">...
Pero no veo qué relación tiene tu consulta con css

[visona]

Iniciado por abimaelrc

Podrias detallar lo que quieres hacer exactamente y donde lo quieres colocar en ese codigo. Porque estoy tratando de entender lo que quieres hacer pero me pierdo cuando leo el codigo

Pues lo que quiero es que me salga un bocadillo cuando se pase el mouse por la imagen que muestra. El codigo este hace que salga ese bocadillo, pero en el ejemplo es un texto.
No se si me he explicado bien.

Un saludo

[abimaelrc]

Verifica si en este lugar encuentras lo que quieres hacer, ahi tienes recursos de CSS
http://www.araudi.net/

[Triby]

Tooltip?

<a href="#" title="Esto aparece como tooltip">Texto del enlace</a>

Si no te sirve eso, entonces busca tooltip simulado en la web que te sugiere abimaelrc

[jomaruro]

Hola:

Échale un vistazo a este artículo, quizá te sirva de ayuda.

Saludos.

[kseso?]

Si no entendí mal, creo que lo que quiere es colocar el enlace (con su span oculto) dentro del código php
De ahí mi comentario inicial.
Pero claro, ante la ambigüedad de la consulta...

[Triby]

Dn kseso?, no es la primera vez (seguramente tampoco sera la ultima) que se haga una consulta tipo "adivina lo que quiero"... aun despues de la explicacion "del bocadillo".

Lo bueno es que ya cuenta con algun punto de partida.

[kseso?]

Habrá que esperar, Maese Triby, las oportunas aclaraciones/desambiguaciones

[visona]

Iniciado por Triby

Dn kseso?, no es la primera vez (seguramente tampoco sera la ultima) que se haga una consulta tipo "adivina lo que quiero"... aun despues de la explicacion "del bocadillo".

Lo bueno es que ya cuenta con algun punto de partida.

jajajajaja, eso a estado bien, lo que pasa es que se exactamente lo que quiero pero no se explicarlo. le echo un vistazo a lo que me habeis dicho a ver si me sale algo, si no me sale os comento.
Gracias

[visona]

Me explico mejor.
Yo hago una consulta en la que saco una imagen y un dato dentro de una tabla, la tabla tiene asignado un CSS y la imagen tiene asignado un enlace, mediante la funcion "ALT" saco la descripcion de esa foto (la descripcion es un campo de la base de datos).
Ahra lo que quiero es sacar esa descripcion mediante un tooltip, pero no se como meter ese codigo para que me funcione. os coloco el codigo original sin el tooltip y el tooltip para ver si me podeis decir como colocar el tooltip para que me funcione.

Este es el codigo sin el tooltip


<?php do { ?><table width="90" height="44" border="0" align="center" class="imagenes_horizontal">
<tr>
<td>
<p align="center"><a href="detalle.php?detalle=<?php echo $row_lado['id_producto']; ?>"><img src="<?php echo $row_lado['imagen']; ?>" alt="" width="85" height="70" /></a></p></td>
</tr>
<tr>
<td class="tex_normal">Precio:<?php echo $row_lado['pvd']; ?></td>
</tr>
</table>

<?php } while ($row_lado = mysql_fetch_assoc($lado)); ?>

y este es el tooltip que quiero poner (el CSS ya esta creado)

<a class=Ntooltip href="#">
el texto visible
<span>
... el texto oculto (cualquier código HTML) ......
</span>
</a>
Un saludo

[Triby]

abimaelrc ya te sugirio buscar ejemplo de esto en www.araudi.net, en la primera columna, casi hasta abajo estan:

- Title simulado (tooltip)
- Title simulado al pulsar (tooltip)

Ahora, si tu aclaracion/desambiguacion no fuese tan ambigua, pensaria que sabes crear el tooltip con html + CSS pero ignoras como aplicarlo en tu codigo PHP, en todo caso, y a reserva de que exista $row_lado['descripcion'], podria ser mas o menos asi:

<a href="detalle.php?detalle=<?php echo $row_lado['id_producto']; ?>" class="ntooltip"><img src="<?php echo $row_lado['imagen']; ?>" alt="" width="85" height="70" /><span><?php echo $row_lado['descripcion']; ?></span></a>

Nota: De preferencia no uses mayusculas ni caracteres especiales en los nombres de identificadores y clases en tu CSS.

[visona]

Iniciado por Triby

abimaelrc ya te sugirio buscar ejemplo de esto en www.araudi.net, en la primera columna, casi hasta abajo estan:

- Title simulado (tooltip)
- Title simulado al pulsar (tooltip)

Ahora, si tu aclaracion/desambiguacion no fuese tan ambigua, pensaria que sabes crear el tooltip con html + CSS pero ignoras como aplicarlo en tu codigo PHP, en todo caso, y a reserva de que exista $row_lado['descripcion'], podria ser mas o menos asi:

<a href="detalle.php?detalle=<?php echo $row_lado['id_producto']; ?>" class="ntooltip"><img src="<?php echo $row_lado['imagen']; ?>" alt="" width="85" height="70" /><span><?php echo $row_lado['descripcion']; ?></span></a>

Nota: De preferencia no uses mayusculas ni caracteres especiales en los nombres de identificadores y clases en tu CSS.

El codigo lo he sacado de esa pagina pero no sabia como colocarla, ahora con tu ayuda ya me sale el tooltip, pero....
Me sale el Tooltip al pasar el mouse por la derecha, con lo que no se ve el texto, he estado viendo como posicionarlo para que salga a la izquierda, pero cuando lo consigo tambien me lleba la imagen a la derecha.
Alguna idea de como posicionar el tooltip a la izquierda de la imagen sin que me mueva la imagen?.
Un saludo y muchas gracias

[kseso?]

Pon el código css que estás utilizando y el html generado, Visona.

Pero seguramente tendrás algo parecido a:

a:hover span {
left:XXpx;
top:XXpx;}

Cambia los valores (también admite valores negativos)

Un saludo

[visona]

Iniciado por kseso?

Pon el código css que estás utilizando y el html generado, Visona.

Pero seguramente tendrás algo parecido a:

Cambia los valores (también admite valores negativos)

Un saludo

@charset "utf-8";
@import url("Ntooltip.css");
/* CSS Document */



a.Ntooltip {
position: relative; /* es la posición normal */
text-decoration: none !important; /* forzar sin subrayado */
color:#0080C0 !important; /* forzar color del texto */
font-weight:bold !important;
}

a.Ntooltip:hover {
z-index:999; /* va a estar por encima de todo */
background-color:#000000; /* DEBE haber un color de fondo */
top: 0px;
right: 0px;
}

a.Ntooltip span {
display: none; /* el elemento va a estar oculto */
}

a.Ntooltip:hover span {
display: block; /* se fuerza a mostrar el bloque */
position: absolute; /* se fuerza a que se ubique en un lugar de la pantalla */
top:2em;
left:2em; /* donde va a estar */
width:250px; /* el ancho por defecto que va a tener */
padding:5px; /* la separación entre el contenido y los bordes */
background-color: #0080C0; /* el color de fondo por defecto */
color: #FFFFFF; /* el color de los textos por defecto */
right: 250px;
}

este es el codigo

[kseso?]

Iniciado por kseso?

Pon el código css que estás utilizando y el html generado, Visona.

Pero seguramente tendrás algo parecido a:

a.Ntooltip:hover span {
left:2em;
top:2em;}

Cambia los valores (también admite valores negativos)

Un saludo

Lo dicho, cambia los valores remarcados en rojo.
Y por cierto, quizás "right:250px" (la última de a.Ntooltip:hover span) esté interfiriendo.

[visona]

ok solucionado. Muchas gracias