cambio de imágenes

navessd · #1 (**permalink**) 20/07/2009, 14:38

Estimados tengo este diseño que me debería permitir ir cambiando la imagen central cada vez que se haga click en cada la miniatura.
les dejo el link de la página de prueba: test_02.html

pero no me resulta, no se que estoy haciendo mal....

aca está el código que estoy usando

Código HTML:

<!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=iso-8859-1" />
<title>Untitled Document</title>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}

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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script> 

</head>

<body>

<a href="javascript:;" onClick="MM_swapImage('img_gra','','img/test1.gif',1)"><img src="img/pequetest1.gif" name="img_peq_01" border="0" id="img_peq_01"></a> 
<a href="javascript:;" onClick="MM_swapImage('img_gra','','img/test2.gif',1)"><img src="img/pequetest2.gif" name="img_peq_02" border="0" id="img_peq_02"></a> 
<a href="javascript:;" onClick="MM_swapImage('img_gra','','img/test3.gif',1)"><img src="img/pequetest3.gif" name="img_peq_03" border="0" id="img_peq_03"></a>  


<br>
<br>
<br>
<img src="img/test1.gif" name="img_gra" id="img_gra"> 

</body>
</html>

alguien que sepa como arreglar esto?

gracias.

Adler · #2 (**permalink**) 20/07/2009, 15:27

Hola

Prueba así

Código javascript:

Ver originalvar fondo = ['img/test1.gif','img/test2.gif','img/test3.gif'];
function MM_swapImage(queimagen) { 
document.getElementById("fondo").innerHTML = "<img src="+fondo[queimagen]+" />"
}

Código html:

Ver original<img onClick="MM_swapImage(1);" src="img/pequetest1.gif" name="img_peq_01" border="0" id="img_peq_01"></a> 
<img onClick="MM_swapImage(2);" src="img/pequetest2.gif" name="img_peq_02" border="0" id="img_peq_02"></a> 
<img onClick="MM_swapImage(3);" src="img/pequetest3.gif" name="img_peq_03" border="0" id="img_peq_03"></a>  
 
 
<br>
 
<br>
<br>
<div id="fondo">
<img src="img/test1.gif" name="img_gra" id="img_gra"> 
</div>

Suerte

navessd · #3 (**permalink**) 20/07/2009, 17:01

lo estoy probando, pareciera que le falta un pequeño ajuste, pero sin duda que anda mejor de lo que estaba tratando de armar.

lo dejé en este lugar

gracias