etiqueta title en una imagen

[pepeluis1]

Buenos dias

Tengo una imagen. Lo que quiero es que cuando me pare sobre ella me muestre un mensaje esto lo hago un la etiqueta title hasta hay todo va bien pero necesito cargar una pequeña lista osea poner saltos de linea dentro de esta etiqueta. No se si se pueda hacer o halla otra manera. Espero haberme hecho entender.

<img src="images/01.png" width="16" height="16" title="a b c d">

Gracias

[yense]

Bueno si quieres hacer eso mejor busca tooltpi en javascript o mejor con jquery eso te debe de ayudar

ademas solo debes de colocar un title en cada tag

[sanxuan]

Un ejemplo con CSS y HTML:

Código HTML:

<div class="hover">
    <img src="img.gif"/>
    <p>Título<br/>linea 2</p>
</div>
 

Código CSS:

.hover {
    display: inline-block;
    position: relative;
    text-align: center;
}
.hover p {
    background: none repeat scroll 0 0 #334455;
    bottom: 0;
    color: #FFFFFF;
    margin: 0;
    position: absolute;
    text-align: center;
    visibility: hidden;
    width: 100%; /* aquí debería decir 100% */
}
.hover:hover p {
    visibility: visible;
}
 

El párrafo permanece oculto y al pasar por encima de la imagen se vuelve visible.

[pepeluis1]

MUchas gracias por la respuesta voy a probarlo y te comento...

[pepeluis1]

Hice la prueba pero no pasa nada(NO FUNCIONA). No se mucho de css pero en los estilos no deberia ir el nombre de la imagen o algo.

Gracias

[sanxuan]

Según te lo he puesto, la imagen está colocada en una etiqueta HTML <img/>.
También podría ir en el fondo del div con una propiedad background, pero en ese caso debes añadir el alto y ancho de la imagen a las propiedades width y height del div.
Como puede que la clase deba usarse con más de una imagen de diferentes medidas, parece mejor la primera solución.
Desde luego que el código debe colocarse dentro de una página y que en el atributo src="img.gif" de la etiqueta img debes colocar la dirección de una imagen de tu ordenador, de otro modo no verás nada.
La intención es que el texto que colocas en la etiqueta <p> se muestre en la parte inferior de la imagen cuando pasas por encima de la foto.