Que tal amigos buen dia, miren tengo un problema, estoy creando una web en la cual estoy implementando una galeria de imagenes de seis fotografias pequeñas y kuando se pasa el mouse sobre una de ellas la misma aparece a un costado pero mas grande, ahora mi problema es el siguente, como las imagenes las cargo de una base de datos de las sgiuiente manera:
Código PHP:
$sql = "SELECT img_1,img_2,img_3,img_4,img_5,img_6 FROM infoauto WHERE id_infoauto = 1";
$mq = mysql_query($sql,$con);
$row = mysql_fetch_array($mq);
$i=1;
while($i < 7){
$img = 'img_'.$i;
<table class="tablainfoauto" width="110" align="left" border="0">
<tr>
<td align="center" valign="middle"><a onmouseover="javascript:mostrardiv();" onmouseout="javascript:cerrar();"><img name="chevy" src="Imagenes/<?php echo $row[$img]?>" width="105" height="80" border="0" align="absmiddle"/></a></td>
</tr>
</table>
$i++;
}
asi se creando las miniaturas de las imagenes pero lo que no puedo hacer es como relacionar cada imagen con la imagene que debe de ser utilizo este codigo para mostrar la imagen en grande, en donde esta resaltado lo de php ahi debe de ir la imagen que se quiere hacer grande pero no se como hacerla dinamicamente:
Código PHP:
<div id="fotogrande" class="fotogrande">
<img class="imgfotogrande" src="Imagenes/[B]<?php ?>[/B]" name="fotogrande" width="770" height="521" border="0" align="absmiddle"/>
</div>
Este codigo javascript es el que utilizo para ocultar los divs:
Cita: // JavaScript Document
function mostrardiv() {
div1 = document.getElementById('fotogrande');
div1.style.display = "";
div1.style.display = 'block';
div2 = document.getElementById('tablainfo');
div2.style.display = 'none';
}
function cerrar() {
div1 = document.getElementById('fotogrande');
div1.style.display = 'none';
div2 = document.getElementById('tablainfo');
div2.style.display = "";
}
Espero y me halla dado a entender, les agradesco mucho su ayuda. Saludos desde Zacatecas, México.