Tengo el siguiente incoveniente muestro imagenes de un directorio X; al posicionarme sobre una de las imagenes se abre una capa (ventana) que muestra la imagen ampliada. Lo que no logro conseguir es precisamente ésto, que al posicionarse sobre la imagen muestre la que corresponde (muestra solo la ultima imagen).
El problema esta en la capa "ventana".
Como se logra este efecto con javascript, tengo claro que debo pasar los parametros correspondiente al archivo (imagen) y descripcion.
Como lograrlo de acuerdo con este codigo:
Código PHP:
<?php
// Muestras para prueba
$codpro="5972332";
$nompro="BULBO TEMP.(INYEC) UNO-PT.GT-BVA-F.93/95";
$directorio="catalogo/$codpro";
?>
<html>
<head>
<style type="text/css">
<!--
#ventana
{
position:absolute;
width: 350px;
heigth: 430px;
z-index:1;
left: 250px;
top: 100px
visibility: hidden;
}
H1.SaltoDePagina
{
PAGE-BREAK-AFTER: always
}
.Estilo1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: bold;
}
.Estilo2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF0000;
font-weight: bold;
}
.Estilo3 {
font-size: 9px;
font-style: italic;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #EEEEEE;
}
a:link {
color: #003399;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #003399;
}
a:hover {
text-decoration: none;
color: #003399;
}
a:active {
text-decoration: none;
color: #003399;
}
-->
</style>
<script language=JavaScript>
function imprimir(){
document.all.item("noprint").style.visibility='hidden'
window.print()
document.all.item("noprint").style.visibility='visible'
}
</script>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td class="Estilo2"> CATALOGO DE PRODUCTO</TD>
</tr>
<tr><td><hr></td></tr>
<tr>
<td class="Estilo1" align="left"> <? echo $codpro; ?> <? echo $nompro; ?></TD>
</tr>
<tr><td><hr></td></tr>
<tr>
<td>
<table width="98%" border="0" cellspacing="2" cellpadding="2" bordercolor="#CDCDC1" align="left">
<?
// Abrir directorio y mostrar contenido
$cimagen=6;
//Cantidad de imagenes x fila
if(is_dir($directorio))
{
$ach = scandir( $directorio);
$cnt = count($ach);
$i=0; $c=0;
echo "<tr>";
for ($i=$i;$i<$cnt;$i++)
{
if($ach[$i] != "." && $ach[$i] != "..")
{
$archivo=$directorio."/".$ach[$i];
?>
<td width=10% align=center><div><a href="#" onmouseover="MM_showHideLayers('ventana','','show')" onmouseout="MM_showHideLayers('ventana','','hide')">
<img src="<? echo $archivo; ?>" width="70" height="50" border="1" alt="Click, amplia imagen"></a></div></td>
<?
$c=$c+1;
}
else
{
$c=$c-1;
$resto=3;
}
if($c > $cimagen-$resto)
{
echo "</tr>";
if($i < $cnt)
{
echo "<tr>";
$c=0;
$resto=1;
}
}
}
}
?>
</table>
</TD>
</tr>
</table>
<div id="ventana">
<table width="100%" align="center">
<tr >
<td align=center><img src="<? echo $archivo; ?>" border="1" width="350" height="300"></TD>
</tr>
<tr >
<td align=left class="Estilo4"><b><? echo $describe; ?></b></TD>
</tr>
<tr >
<td><hr></TD>
</tr>
<tr>
<td >
<div id=noprint align=center><input type=button value=Imprimir Onclick="imprimir()"></div>
</td>
</tr>
<tr >
<td><hr></TD>
</tr>
<tr>
<td height="10" valing="top" align="left" class="Estilo3"> Departamento de Informática - INDRA S.A.</TD>
</tr>
</table>
</div>
</body>
</html>
de antemano gracias.