como colocar una barra independiente en una imagen

Hola:
se puede usar un enlace (<a></a>) de tipo "tooltip" usando el siguiente código:

En la hoja de .html:

<a class="Ntooltip" href="INDEX.html">[contenido no disponible]
<span>
ESTE TEXTO SE VE AL PASAR EL MOUSE POR ENCIMA
</span>
</a>

Cambiar lo que está en MAYÚSCULAS y el tamaño de la imagen (width - height).


En la hoja de estilos .css:

a.Ntooltip {position:relative; /* es la posicion normal */
text-decoration:none !important; /* forzar sin subrayado */
color:#000000 !important; /* forzar color del texto */
/* forzar negritas */}
a.Ntooltip:hover {z-index:999; /* va a estar por encima de todo */
color:#A52A2A !important;
background-color:#F5F5DC; /* DEBE haber un color de fondo */}
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:-3em;left:-7em; /* donde va a estar derecha izq quitar signo menos cambiar valores*/
width:170px; /* el ancho por defecto que va a tener */
padding:5px; /* la separacion entre el contenido y los bordes */
border:black 1px solid;
background-color:#98FB98; /* el color de fondo por defecto */
color:#000000; /* el color de los textos por defecto */}

Cambiar colores, tamaños, posición del aviso, etc...

Si desea usar más de una vez este tipo de enlace en la misma hoja, debe cambiar "Ntooltip" (En rojo) por "Mtooltip", "Ptooltip", "Htooltip", etc...

Ver ejemplo en:
http://mentesenblanco.myartsonline.com/editorial.html
sobre la incógnita.

Un amigo desde Colombia,

omar.piamba