cambiar imagenes con un "click"

esetigris · #1 (**permalink**) 06/12/2010, 15:42

Antes de nada un saludo a todos los foreros interesados en el tema...

Quiero cambiar una imagen en una pagina con un click sobre ella,y volver a ver la anterior con otro click,y asi.....
tengo esto,pero no va mas que una vez:
tb. hay un cambio de color del <td> ,pero va igual...

<script>
var foto=new Array()
foto[0]=new Image()
foto[0].src="2.jpg"
.......
function cambia(caja){
caja.style.backgroundColor="yellow";
}
</script>
......
<td bgcolor=green onclick="cambia(this)"><img src="1.jpg" ></td>
<td bgcolor=red><img src="1.jpg" onclick="this.src=foto[0].src"></td>

hay alguna forma de hacerlo en ambos casos o en uno solo , para poder cambiar tantas veces como se "clickee" de color de fondo o de imagen????
he mirado un monton de javascripts , pero ninguno me soluciona esto de manera sencilla ( tengo varias tablas de 10 x 100 imagenes) y no quiero cargarlas todas "a mano"

lo mas dificil sera recordar en algun .js o .txt despues , las imagenes que han sido cambiadas...pero eso sera mi proximo tema si me ayudais con este...
gracias de antemano

_cronos2 · #2 (**permalink**) 06/12/2010, 15:49

Haz una función así:

Código Javascript:

Ver originalvar src=['1.jpg','2.jpg'], contador=1;
function cambiarImg(img){
 img.src=src[contador];
 contador=contador<src.length?contador++:0;
}

Saludos (:

esetigris · #3 (**permalink**) 06/12/2010, 16:25

gracias...lo he probado , pero no me va...
de todas formas no me vale,ya que tengo miles de fotos , y solo quiero hacer el cambio de foto original (cualquiera de las 1000) x "foto en negro" y viceversa...

es un album de "cromos" y quiero tachar los que tengo para ver los que me faltan y asi hacerme una idea mas "global" de mi coleccion...

_cronos2 · #4 (**permalink**) 06/12/2010, 16:48

Puedes ponerlo así:

Código Javascript:

Ver originalvar imgs={};
for(i=0;img=document.images[i];i++){
 imgs[img.name]=img.src;
}
function cambiarImg(img){
 img.src=img.src==imgs[img.name]?'black.jpg':imgs[img.name];
}

Y tendrías que añadirle un nombre diferente a cada imagen.
Saludos (:

esetigris · #5 (**permalink**) 06/12/2010, 18:04

gracias otra vez...me sigue sin funcionar...estoy de un espeso esta noche...
esto es la prueba...a lo mejor me falta alguna " , " nosé...mañana me pongo otra vez , aunque me tenga que recorrer todo el msdn de mocosoft...

Código Javascript:

Ver original<HTML>
<HEAD>
<script language="javascript">
var imgs={};
for(i=0;img=document.images[i];i++){
 imgs[img.name]=img.src;
}
function cambia(img){
 img.src=img.src==imgs[img.name]?'2.jpg':imgs[img.name];
}
</script>
</HEAD>
<BODY BGCOLOR="paleturquoise">
<Table border=1 >
<tr>
    <td bgcolor="green" ><img src="6.jpg"onclick="cambia(this)" ></td>
 
    <td bgcolor=red><img src="3.jpg" onclick="cambia(this)"></td>
</tr>
</table>
</body>
</HTML>

...y como decian los barones....sigo buscando una escalera al cielo...

_cronos2 · #6 (**permalink**) 07/12/2010, 08:05

Claro, porque si te das cuenta el código ese lo que hace es recopilar información de las imágenes del documento, pero se está ejecutando en el head, y en ese momento no existe ninguna imagen.
Saludos (:

esetigris · #7 (**permalink**) 07/12/2010, 11:01

no me di cuenta de ese "fallo"gracias por responder...
lo he puesto al final del body y me imagino que me carga todas las fotos,pero al pasar un par de clics sobre ellas me dá una alternancia entre la "black.jpg" y la ultima cargada,no recupera su imagen inicial...aunque ya es un avance.
no se si se podria hacer un refresh() individual o algo asi

y el tema mas importante...como guardar en un texto los elementos que voy tachando(estoy pensando en FSO.createtextfile....llamado por la funcion cambiaimg)y lo mas dificil todavía ,al abrir mi coleccion.html que me cargue las fotos de los cromos "repes" en negro , osea abrir a la vez el HTML con la informacion metida en el TXT al lado .
hasta he pensado que mi solucion se haria mejor con alguna basedatos y un solo javascript que me rellene la pagina de html...pero estoy "pegado "en ese tema

pero todo por pasos...lo 1º es lo1º...sabes a que se puede deber la alternancia sólo entre las 2 fotos antes mencionadas???
como siempre...gracias por el apoyo

hoy necesito un pez...ya sé pescar (creo)

_cronos2 · #8 (**permalink**) 07/12/2010, 13:45

¿Le estás poniendo un name diferente a cada imagen?
Saludos :D

esetigris · #9 (**permalink**) 11/12/2010, 05:46

no se lo ponia , por eso me cogia el ultimo...
les he asignado un name a cada foto , el mismo numero de foto y ahora todo va OK (menos mal de un programita mio en VB6 que hace lo que le pido ,

sino eran horas con el teclado)

ahora voy a intentar que se acuerde de las fotos que tengo "tachadas" en un ".txt" y que me las cargue al abrir el HTM...
si tengo alguna otra duda...por aqui estare...
GRACIAS , CRONOS 2 , por tu apreciable ayuda

esetigris · #10 (**permalink**) 11/12/2010, 13:36

conseguido el 2º tema...GUARDAR Y RECUPERAR

voila coma ha quedado:

Código HTML:

Ver original<img src="1.jpg" name=leer onclick="leecambios()">
<img src="2.jpg" name=aplicar onclick="aplicacambios()">
<Table border=1 >
 
<tr>
    <td><img src="fot/a/38185.jpg" name=33 onclick="cambia(this)"></td>
    <td><img src="fot/a/47754.jpg" name=44 onclick="cambia(this)"></td>
    <td><img src="fot/a/11753.jpg" name=11753 onclick="cambia(this)"></td>
    <td><img src="fot/a/16587.jpg" name=16587 onclick="cambia(this)"></td>
    <td><img src="fot/a/38185.jpg" name=38185 onclick="cambia(this)"></td>
    <td><img src="fot/a/47754.jpg" name=44754 onclick="cambia(this)"></td>
</tr>
</table>
<script language="javascript">
var numero={};
for(i=0;img=document.images[i];i++){numero[img.name]=img.src;}
 
function cambia(img){img.src=img.src==numero[img.name]?'3.jpg':numero[img.name];}
 
function aplicacambios() 
   {
    var numero={};
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    var a = fso.CreateTextFile("F:/XAPAS/a3.txt", 2);
     for(i=0;img=document.images[i];i++)
      {numero[img.name]=img.src;
      a.WriteLine( numero[img.name]);
      }
    a.Close();
   }
 
function leecambios() 
   {
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    var abc = fso.OpenTextFile("F:/XAPAS/a3.txt", 1);
     for(i=0;img=document.images[i];i++)
      {
       var jjj=abc.ReadLine();
       img.src=jjj;
      }
    abc.Close();
   }
</script>

Y COMO ME QUEDA EL TXT

Código HTML:

Ver originalfile:/F:/XAPAS/1.jpg
file:/F:/XAPAS/2.jpg
file:/F:/XAPAS/fot/a/38185.jpg
file:/F:/XAPAS/fot/a/47754.jpg
file:/F:/XAPAS/fot/a/11753.jpg
file:/F:/XAPAS/fot/a/16587.jpg
file:/F:/XAPAS/3.jpg
file:/F:/XAPAS/3.jpg

que facil es programar con ayuda desinteresada y
que facil deberia ser controlar "espacios aereos" por menos de 300.000 €

Joselitro · #11 (**permalink**) 11/12/2010, 21:48

Prueba con ese script, yo lo e probado y funciona bien, e puesto una tercera imagen para volver a la imagen inicial:

Código:

<script language="JavaScript" type="text/javascript">
<!--
var foto=new Array()
var which=0

foto[0]="fondo.jpg"
foto[1]="fondo2.jpg"

function cambia(caja){ 
caja.style.backgroundColor="yellow";
}

function backward(){
if (which>0){
window.status=''
which--
document.images.imagen.src=foto[which];
}
}

function forward(){
if (which<foto.length-1){
which++
document.images.imagen.src=foto[which]
}
else window.status='End of gallery'
}
//-->
</script>
<td bgcolor=green onclick="cambia(this)"><img src="2.jpg"></td>
<td bgcolor=red><img name="imagen" src="1.jpg" onclick="forward()"></td>
<td bgcolor=blue><img src="3.jpg" onclick="backward()"></td>