creando pequeña galeria (novato)

[pablo1985]

Buenas quiero crear una pequeña galeria con la imagen grande y los thums en pequeño debajo, creo que tengo que ponerle a los enlaces de los thumbs un id, y crear una funcion que al hacer click en el id cambie el src de la imagen. hasta ahi va bien? lo que quiero hacerlo es no intrusivo y el problema es que no se la sintaxys ...me echais una manita please....

[pablo1985]

Bueno voy a empezar a construirlo a ver si alguien me puede echar una mano....

Código HTML:

<img id="foto" src="imagen.jpg" alt=""/>
 
<ul>
 
<li><a href="#" id="img1">foto1</a></li>
<li><a href="#" id="img2">foto2</a></li>
<li><a href="#" id="img3">foto3</a></li>
 
</ul>
 

ese seria el html, el javascript el problema es q no recuerdo bien como era...


document.getElementById(foto)

y ya no se seguir...ajajja alguien me echa un cable please?

[jackson666]

Código Javascript:

document.getElementById('foto').src='nuevaRuta';
 

[pablo1985]

muchisimas gracias jackson666,eso lo uso para llegar hasta la imagen,pero lo que no se es como hacer que los enlaces hagan cambiar el src de la foto.puede ser algo asi??con la sintaxis correcta claro...

Código Javascript:

document.getElementById('img1'){
  document.getElementById('foto').src='nuevaruta';
 
}
 

Código HTML:

<img id="foto" src="imagen.jpg" alt=""/>
 
      <ul>
 
      <li><a href="#" id="img1">foto1</a></li>
 
      <li><a href="#" id="img2">foto2</a></li>
 
      <li><a href="#" id="img3">foto3</a></li>
 
      </ul>
 

pero como detecto el click en el enlace?

[jackson666]

Código HTML:

<img id="foto" src="imagen.jpg" alt=""/>
      <ul>
      <li><a href="javascript:document.getElementById('foto').src='nuevoSRC.jpg'" id="img1">foto1</a></li>
      <li><a href="#" id="img2">foto2</a></li>
      <li><a href="#" id="img3">foto3</a></li>
      </ul>
 

[pablo1985]

perfecto...mil gracias !!!! y para rizar el rizo...que no se si se puede, sacar esa fincion javascript fuera del html para que no sea intrusivo???

[jackson666]

Ya me estas pidiendo demasiado

Código Javascript:

<script type="text/javascript">
function setSource(src){
   document.getElementById('foto').src = src;
   return;
}
</script>
 
<a href="javascript:setSource('tuSRC.jpg');">ALGO</a>
 

No te olvides de mi karma