Saludos,
Con ayuda de Javascript. Veamos:
<HTML>
<HEAD>
<style type="text/css">
<!--
#toolTipBox {
display: none;
padding: 4;
font-size: 14px;
border: black solid 1px;
font-family: verdana;
position: absolute;
background-color: #AADDEE;
color: #FFFFFF;
}
-->
</style>
<script type="text/javascript">
<!--
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Saul Salvatierra :: http://myarea.com.sapo.pt
with help from Ultimater :: http://ultimiacian.tripod.com */
var theObj="";
function toolTip(text,me) {
theObj=me;
theObj.onmousemove=updatePos;
document.getElementById('toolTipBox').innerHTML=text;
document.getElementById('toolTipBox').style.display="block";
window.onscroll=updatePos;
}
function updatePos() {
var ev=arguments[0]?arguments[0]:event;
var x=ev.clientX;
var y=ev.clientY;
diffX=20;
diffY=20;
document.getElementById('toolTipBox').style.top = y-2+diffY+document.body.scrollTop+ "px";
document.getElementById('toolTipBox').style.left = x-2+diffX+document.body.scrollLeft+"px";
theObj.onmouseout=hideMe;
}
function hideMe() {
document.getElementById('toolTipBox').style.display="none";
}
-->
</script>
</HEAD>
<BODY>
<div align="center">
<span id="toolTipBox" width="200"></span>
<img src="Imagen.jpg" width="200" height="200" border="0" onmouseover="toolTip('Aqui el TEXTO TEXTO',this)">
</div>
</BODY>
</HTML>
Tienes que repetir el contenido del div en cada imagen, y cambiar la frase. En el span, puedes modificar el tamaño de la etiqueta.
Arriba en el style, puedes cambiar el color, fondo, tipo, tamaño, etc.
Espero te sea útil.
