Tengo en una página, una foto grande, y debajo unos thumbnails, unas fotos en pequeño.
Quisiera que al pulsar sobre uno de los thumbnails, se mostrase en el cuadro grande, y ya lo he conseguido (esto es el código fuente, en el original tiene también PHP):
Código HTML:
<script language="javascript">
var id=1;
imagen1=new Image
imagen1.src="imgs/1278502949_3.jpg"
imagen2=new Image
imagen2.src="imgs/1278502949_4.jpg"
imagen3=new Image
imagen3.src="imgs/1278502950_5.jpg"
function cambiar(id) {
if (id == 1){
document.images["fotog"].src=imagen1.src
}else if (id == 2){
document.images["fotog"].src=imagen2.src
}else{
document.images["fotog"].src=imagen3.src;
}
document.images['foto' + id].border=2;
}
</script><div id="imgg">
<img src="imgs/1278502949_3.jpg" title="Imagen" name="fotog" alt="Imagen principal" />
</div>
<div id="thumbs">
<img src="thmbs/1278502949_3.jpg" title="Imagen" alt="Imagen secundaria" name="foto1" onMousedown="cambiar(1)" border=2/>
<img src="thmbs/1278502949_4.jpg" title="Imagen" alt="Imagen secundaria" name="foto2" onMousedown="cambiar(2)"/>
<img src="thmbs/1278502950_5.jpg" title="Imagen" alt="Imagen secundaria" name="foto3" onMousedown="cambiar(3)"/>
</div>
</div> Lo de cambiar las fotos va perfectamente, pero el problema viene a la hora del borde (para que quede mejor).
Como veréis si lo probáis, lo que ocurre es que se pone el borde, pero no se quita. Cómo podría hacerlo?
Edito: me imagino que poniendo "border=0", pero no se como ponerlo en el javascript