A ver si esto te sirve:
Esta son las funciones de javascript para mostrar u ocultar, al principio esta el estitlo y despues las funciones:
Código HTML:
<style>
.note { border: 1px solid #6688CC; font: 9px caption; font-weight: bold; background: #CCEEFF; text-decoration:none; color: #000077;}
A.nota { text-decoration: none; }
.notebody { display:block; border: 1px solid #666666; color: #000000; background: #E3F5DC; position:absolute; z-index: +10; width:300px; padding: 2px; left: 10px; font-size: 10px;}
.notetitle { font-weight: bold; background: #669900; color: #000000; border-bottom: 1px dashed #666666; padding: 1px; width: 100%; margin: 0px; font-size: 10px;}
.notehidden { display: none; }
.notevisible { display: block; position:absolute; z-index: +10; left:0px;}
</style>
<script language="javascript">
var ie = false;
var lastNote = '';
if (document.all) { ie = true; }
function getObj(id) {
if (ie) {
return document.all[id];
} else {
return document.getElementById(id);
}
}
function showNote(name) {
if (name == lastNote) {
hideNote(name);
return;
}
if (lastNote != '') { hideNote(lastNote); }
var title = getObj(name + '_title');
var body = getObj(name + '_body');
//title.className = 'notehidden';
body.className = 'notevisible';
lastNote = name;
}
function hideNote(name) {
var title = getObj(name + '_title');
var body = getObj(name + '_body');
//title.className = 'note';
body.className = 'notehidden';
lastNote = '';
}
</script>
Y esto lo pones dentro de body, poniendo un link en cada una de las imagenes que deseas tener la info.
Código HTML:
<a href="javascript:void(0);" id="nota_title" class="note" onmouseover="showNote('nota');" onmouseout="hideNote('nota');"> <img src="images/imagen.jpg"></a>
<span id="nota_body" class="notehidden"><br>
<div class="notebody" align="left">
<table class="notetitle" cellspacing="0" cellpadding="0">
<tr>
<td><font color="white">Nota:</font></td>
</tr>
</table>
Esta es la informacion que veras al pasar sobre tu imagen.
</div>
</span>
Espero te sirve.
Salu2
Jars