Bueno, he colocado lo siguiente en la div donde están las fotos:
<div id="foton" style="left:200px; top:100px;position:absolute; width:580px; height:380px; z-index:1; ">
<img class="fotos id="foto1" src="images/jpge/matias1.jpg" style="visibility: hidden" alt="" />
<img class="fotos id="foto2" src="images/jpge/dinosx3.jpg" style="visibility: hidden" alt="" />
<img class="fotos id="foto3" src="images/jpge/puertox4.jpg" style="visibility: hidden" alt="" /></div>
//El tamaño, posición y z_index de las fotos estan definidos en CSS//
#foto1{
position:absolute; width:580px; height:380px; z-index:2;}
#foto2{
position:absolute; width:580px; height:380px;z-index:3;}
#foto3{
position:absolute; width:580px; height:380px;z-index:4;}
Luego está el boton y su código:
<div id="boton1" style="position:absolute; left:0px; top:50px;"><a href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('botonG','','images/vw2.png',1)"><img src="images/vw1.png" name="botonG" width="98" height="18" border="0"
id="botonG" onClick="document.getElementsByClassName('foto s'). style.visibility="hidden" document.getElementById('foto1').style.visibility= "visible"";/></a></div>"
Este codigo no hace nada. ¿Me puede ayudar alguien?
Lo que quiero es que al pulsar la instancia "botonG" se muestra la foto 1 y las otras dos, no.
Gracias a todos otra vez.