cambiar SRC de un IMG

[monoswim]

Hola, tengo una función de javascript que se ejecuta ante un evento determinado que no viene al caso...Quiero que esa función me cambie una imagen que tengo en el pie de página, que me cambie el SRC o sea que quede igual el tamaño y todo lo demás...

Gracias y saludos

[Danger_]

Bien, digamos que tienes tu imagen, haber si te entendi bien...

<img src="tu-imagen.png" name="cambio">

ahora la cambias asi....

<script>
cambio.src= 'otra-imagen.bmp';
</script>


o tambien te la pongo para que la ejecutes mediante onclick...

<a href=# onclick="cambio.src= 'otra-imagen.bmp';">Cambiar imagen</a>

ya depende de ti utilizarla con una funcion, con onmouseover.....etc.


Saludos !

[JavierB]

Hola monoswim

Para que te funcione en todos los navegadores puedes poner la imágen:

<img src="tu-imagen.png" id="cambio" />

y cambiarla con:

document.getElementById('cambio').src= 'otra-imagen.bmp';

Saludos,

[Danger_]

Muy bien JavierB, Gracias por el dato :)

Saludos !

[JavierB]

De nada. Para eso sirver los foros

[monoswim]

Bueno, muchachos, mil gracias, era más fácil de lo que pensaba !!!

Saludos

[jam1138]

Saludos:

Temo que he tenido un comportamiento extraño con un sacript así. El código que ocupo es el siguiente:

Código:

	function cambiar(id) {
		for(i=1; i<=5; i++) {
		document.getElementById('des'+i).src="Des_01.gif";
		}
		document.getElementById(id).src="Des_02.gif";
                return false
                }

// y la llamo así:
<td><a href="archivo.php?archivo=nombre.ext"><img src="Des_01.gif" border="0" align="top" id="des1" onClick="cambiar(this.id)"></a></td>
<td><a href="archivo.php?archivo=nombre.ext"><img src="Des_01.gif" border="0" align="top" id="des2" onClick="cambiar(this.id)"></a></td>
... etc

En local con Mozilla va bien... pero en línea no me hace el cambio. Con explorer tanto en local como en línea me desaparece la imagen.. osease no hace el cambio.

Notece que son 5 enlaces de la misma forma.. hago un bucle para que al dar click me regrese a mi imagen original el enlace anteriormente cambiado... lo extraño es que éste si me funciona... me hace el cambio ¿por qué el otro no?.

Agrego que.. actualmente "me reestablece" mis imagenes originales al dar click en el enlace (el bucle).. pero quisiera que haga esto al dar click en cualquier otra parte de la página. Supongo será alguna propiedad del Body pero no sé cual..

Gracias de antemano

Edito:
He observado otro comportamiento extraño. Como dije, me funciona en FireFox en local.. pero he notado que me funciona solo al segundo click... al primer click, sea cual sea el enlace.. no me hace nada.. pero el link si me sirve.. ¿?

[jam1138]

Sin novedad... me funcionó tanto en FireFox como en IExplorer en local pero en línea sigue comportandose igual... en FF no hace nada y en Iexplorer me desaparece la imagen.

Edito: ... 10 segundos después.... hey!!!!... dejé el enlace a la imagen que deveria de mostrarse ¿ya?.. para esto la puse como tal en mi navegador... dí atrás para volver a la "página principal" y... FUNCIONÓ!!!! .... en ambos navegadores... (que felicidad) .
Bien... entonces ¿por qué pasa esto?... necesita leer la imagen antes ó qué??... la solución rápida que le daria es insertar la imagen en alguna parte del cuerpo de la página de forma oculta... para qué la lea... pero dudo mucho sea lo correcto. Esta sí no me la sabia ... jejeje sufrí demasiado.

Sigue la pregunta de cómo hacer para que me vuelva a la forma original al dar click en cualquier parte de la página.

Saludos!

[JavierB]

Hola jam1138

Me ha parecido que intentas leer el atributo hsrc de cada imágen:

if (imgarr[i].getAttribute('hsrc')) {

Pero no veo ese atributo en ninguna imágen de la página

Saludos,

[jam1138]

Iniciado por JavierB

Hola jam1138
Me ha parecido que intentas leer el atributo hsrc de cada imágen:
Pero no veo ese atributo en ninguna imágen de la página

Saludos JavierB
Veo que viste el código fuente. La función que está ahí es para cambiar la imagen al pasar sobre ella... la cuál me funciona perfecto, pero quiero que cambie AL HACER CLICK en ella. aunque quizá se mejor con una combinación de ambas.. que cambie al pasar por ella y se quede así si se le da click... .

Ahora bien... para hacer lo que necesito hice mi función aparte de lo más sencillo (lo que he mostrado)... pero! aparentemente hay un problema con el atributo onClick de una imagen en Netscape... pero si llamo a la función desde el enlace pasandole la id manualmente (<a onClick="cambiar('des5')">) no me la ejecuta... ¿?.

También he intentado adaptar la función que viste, pero no he conseguido buenos resultados. El problema básicamente es que no logro que el onCick y el onmouseout "se lleven bien". He logrado que al hacer click se conserve la segunda imagen... pero por el onmuoseout me la regresa a la original y si quito el onmuoseout.. el onmouseover me cambia la imagen... pero ya no hay nada que la regrese a la original... .

Ok.. probemos con esa función:

Código:

	function init() {
	  if (!document.getElementById) return
	  var imgOriginSrc;
	  var imgTemp = new Array();
	  var imgarr = document.getElementsByTagName('img');
	  for (var i = 0; i < imgarr.length; i++) {
		if (imgarr[i].getAttribute('hsrc')) {
			imgTemp[i] = new Image();
			imgTemp[i].src = imgarr[i].getAttribute('hsrc');
			imgarr[i].onmouseover = function() {
				imgOriginSrc = this.getAttribute('src');
				this.setAttribute('src',this.getAttribute('hsrc'))
			}
			imgarr[i].onmouseout = function() {
				this.setAttribute('src',imgOriginSrc)
			}
		}
	  }
	}
	onload=init;

entonces mi enlace estaria asi:

Código:

<td align="center"><a href="archivo.php?archivo=nombre.ext"><img src="Des_01.gif" hsrc="Des_02.gif" border="0" align="top"></a></td>

PERO! () parece que igual hay un problema con el Netscape e Iexplorer5 con el atributo hsrc ... ni a cuál irle...

Solo decir que sí me funcionó con FireFox e Iexplorer el poner la imagen oculta... Mil gracias por la atención... y sus enseñanzas. Saludos!

[JavierB]

Hola de nuevo.

Me ha copiado la página al disco duro para echarle un vistazo cuando pueda, pero la verdad es que no me funciona ni en IE ni en explorer. Además sigo sin entender esta línea:

if (imgarr[i].getAttribute('hsrc')) {

Saludos,

[caricatos]

Iniciado por JavierB

... la verdad es que no me funciona ni en IE ni en explorer...

¡Je, je! un lapsus

[JavierB]

Iniciado por caricatos

¡Je, je! un lapsus

Eso es porque me había tomado unas cuantas birras para celebrar, con retraso, cierto cumpleaños

Logicamente, quise decir que no me funcionaba ni en IE ni en Firefox (parece que ahora ando mejor de la resaca )

Saludos,

[jam1138]

Iniciado por JavierB

Me ha copiado la página al disco duro para echarle un vistazo cuando pueda, pero la verdad es que no me funciona ni en IE ni en explorer.

El enlace que te dejé esra solo una página de "prueba". He aquí en la página oficial --Editado-- . Verás cómo solucioné la función que planteé primero con lo de la imagen oculta (<img src="Descargas/Des_02.gif" style="visibility:hidden">). Y verás que he semisolucionado lo de reestablecer la imagen original al darle click en cualquier parte del documento; le puse una acción a las etiquetas <td>...

Me sigue interezando hacer funcionar esto de la forma correcta. Si sigues dispuesto dame un tiempo y hago muestras de las dos funciones funcionando (válgase la redundancia) para ver la manera de convinarlas ¿ok?... Para que tampoco pierdas tu tiempo...

Gracias por todo. Saludos!

Edito: Al menos invita pa' estar igual