No se si todabia te sirva pero he probado tu script y he tratado de optimizarlo un poco utilizando las direcciones de las imagenes desde una base de datos:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style>
.tooltip {
position:absolute;
text-align:center;
display: none;
z-index:10;
}
.Estilo20 {
font-family: "Century Gothic";
color: #333333;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
function ver_tabla(user,ValueShow) {
user = document.getElementById(user);
var mousex = window.event.x;
var mousey = window.event.y;
user.style.display = ValueShow;
user.style.left = mousex + 5;
user.style.top = mousey;
}
</script>
</HEAD>
<BODY>
<?php
include("class/Conexion.php");
$link= new Conexion();
$result=$link->query("select * from galeria1;");
?>
<?php
$i=0;
while($row = $result->toArray()) {
$imagen= $row['imagen'];
$referencia= $row['referencia'];
$precio= $row['precio'];
?>
<table border="0" cellspacing="2" cellpadding="1">
<tr>
<td>
<a onmouseover="ver_tabla('<?php echo $referencia ?>','block')" onmouseout="ver_tabla('<?php echo $referencia ?>','none')">
<img src="<?php echo $imagen ?>" width="202">
</a>
</td>
</tr>
</table>
<div id="<?php echo $referencia ?>" class="tooltip">
<table bgcolor="#FFFFFF" border="1">
<tr valign="middle">
<td align="center"><img src="<?php echo $imagen; ?>" width="302"><p><span class="Estilo20">REFERENCIA:<?php echo $referencia; ?>
<br>PRECIO:<?php echo $precio; ?><br></span>
</td>
</tr>
</table>
</div>
<?php
}
?>
</body>
</html>
Recuerda que dentro de la base de datos todas las imágenes deben tener su respectiva extensión.