Como hago esto?

[kurt_yorke84]

Hola? La verdad nose mucho sobre Javascript y quisiera que me ayudaran a como sacar el efecto de las fotos de esta página: http://www.985.com.mx/galeria/fotografias2.php?subseccion=unafoto&id=40&cat=3&su b=1 para poner en mi pagina un previo de cada imagen y al pasar el mouse sobre cada previo aparesca la foto en tamaño real, esto en html

De antemano gracias!!!!

[kurt_yorke84]

alguien sabe?

[caricatos]

Hola kurt_yorke84:

En un principio necesitas una foto en miniatura y otra más grande (no le veo mucho sentido que sea la misma... )

En el sitio que veas conveniente pones una etiqueta img que no necesariamente tenga su atributo src...:
<img name="imagen_grande" />

Luego en las miniaturas pones algo así:
<img src="miniatura1.gif" onmouseover="document.images.imagen_grande.src = 'grande1.gif'" />

y Yastá...

Saludos

[kurt_yorke84]

Creo q seria una forma, pero para no tener q repetir una imagen y gastar tiempo para abrir la pagina. En la pagina q les mostre trae este script

Código:

<script language="javascript">
function MuestraFoto(nombrefoto){
	document.FotoGde.src = "../images/galeria/" + nombrefoto;
}

var oldDom = null;
			
function swapForm(objectID){
	dom = findDOM('formStack',objectID,1);
	if (oldDom) oldDom.visibility = 'hidden';
	dom.visibility = 'visible';
	oldDom = dom;
	oldObjectID = objectID;
}
</script>
<style media="screen" type="text/css"><!--
#formStack {
	/*position: relative;*/
	position: relative;
	width: 200px;
	visibility: visible;
	left: 0px;
	top: 5px;
	}

--></style>

Pero despues no entiendo como lo usa:

Código:

<td align="center" valign="top" background="../images/galeriafondo.gif">
					 <img src="http://www.985.com.mx/images/galeria/RAvsM2F01.jpg" name="FotoGde" width=200 border=0 id="FotoGde">
					 <div id="formStack">
					 							<div id="91" style="visibility: hidden;	position: absolute;	top: 0px; left: 0px;"><a href="http://www.985.com.mx/images/galeria/RAvsM2F01.jpg" target=_blank>La Banda más legendaria del planeta.</a></div>
												<div id="90" style="visibility: hidden;	position: absolute;	top: 0px; left: 0px;"><a href="http://www.985.com.mx/images/galeria/RAvsM2F02.jpg" target=_blank>Mick, Roy y Brian en el Bulldog.</a></div>
												<div id="89" style="visibility: hidden;	position: absolute;	top: 0px; left: 0px;"><a href="http://www.985.com.mx/images/galeria/RAvsM2F03.jpg" target=_blank>El glamour en todo su esplendor.</a></div>
.
.
.
<div id="28" style="visibility: hidden;	position: absolute;	top: 0px; left: 0px;"><a href="http://www.985.com.mx/images/galeria/RAvsM2F56.jpg" target=_blank>Xavi se llevo la noche (y al fotógrafo al baño).</a></div>
										</div>

i duespues hace esto de nuevo con cada foto:

.... <td align='center' valign='top' width='25%'>
<a href="http://www.985.com.mx/images/galeria/RAvsM2F02.jpg" onMouseOver="MuestraFoto('RAvsM2F02.jpg'); swapForm(90);" target="_blank">
<img src="../images/galeria/RAvsM2F02.jpg" width=70 height=60 border=0 alt="Mick, Roy y Brian en el Bulldog." title="Mick, Roy y Brian en el Bulldog."></a>
<br>
</td>

ALGUIEN ME LO PODRIA EXPLICAR POR FAVOR?