cambio de imagen

marrot · #1 (**permalink**) 12/09/2002, 03:56

hola! estoy intentando cambiar una imagen cuando se hace click en un objeto.
Los objetos son lineaMenu1, lineaMenu2,... y tiene esta estructura:
lineaMenu1.texto
lineaMenu1.padre
lineaMenu1.imagen -> es una imagen creada con new Image....
etc.

Mi problema es que utilizo una función donde le paso lineaMenuX escribiendo directamente el objeto "lineaMenuX" y la función es:

function cambiaImagen(ite)
{
if(ite.imagen.src==menuCerrado.src)
{
ite.imagen.src=menuAbierto.src;
}
else
{
ite.imagen.src=menuCerrado.src;
}

}

He comprobado que al objeto le cambia la ruta correcta de la imagen pero NO SÉ PORQUE NO LA CAMBIA EN PANTALLA.

Por favor, alguien podría indicarme que me falta o que hago mal????

comun · #2 (**permalink**) 12/09/2002, 11:24

Hola,

no estoy seguro compañero... pero según mi poco entendimiento de lo que pusiste creo que el problema puede radicar en que si lo haces de ese modo la web no se refresca y no toma los cambios lo img.

digo esto porque algo así me sucedió a mí,

Un saludo, esperando ser de ayuda...
COMUN

<a href='ir.asp?http://www.califato.com' target='_blank'>http://www.califato.com...</a>
<a href='ir.asp?http://www.califato.net' target='_blank'>http://www.califato.net...</a>

<center>
<img src="http://membres.lycos.fr/dipro/new/logo.gif" border=0 width="100" height="30">
<a href='ir.asp?http://dipro.califato.com' target='_blank'>http://dipro.califato.com...</a>
</

Grumete · #3 (**permalink**) 12/09/2002, 11:27

ite q se supone q es???

yo siempre q lo he hecho, con un simple document.images['name_o_id_imagen'].src = "ruta_imagen"

¿Algo decente de ver? creo q no: http://sgmfesy.eresmas.net

Beakdan · #4 (**permalink**) 12/09/2002, 17:20

Marrot:
El problema de que no cambie la imagen en la pantalla, es que la propiedad imagen de tu objeto no tiene relación alguna con la imagen en la pantalla. Es de suponerse que primero debes crear la imagen en la pantalla, luego entonces asignar el objeto imagen que se muestra a la propiedad de tu objeto.
Imagino que el objeto es una capa que tiene dentro la imagen ¿no?. Si es este el caso, las cosas son mas sencillas para NS4, ya que las imágenes dentro de las capas pueden tener el mismo name o id.
Esto es debido a que NS4 ve las capas como documentos independientes. Entonces para cambiar la imagen que se muestra dentro de la capa, solo accesas a la colección images de cada capa.
Con otros navegadores la cosa se complica. Ya que cada imagen debe tener un name o id único, y para que puedas hacer los cambios. Pero puedes tomar el mismo nombre de la capa en la cual esta contenida, agregarle un prefijo y entonces con eval asignar el objeto imagen a la propiedad imagen de tu objeto. A continuación te pondré un ejemplo de un script que genera "N" cantidad de objetos, y a puede seguir el rastro de cada uno de ellos para cambiar la imagen colocada dentro. Ajusta la cantidad de objetos en el onload, y la ruta de tus dos imagenes... bueno, experimenta...

Beakdan · #5 (**permalink**) 12/09/2002, 17:23

Código:

&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;&lt;/TITLE&gt;
&lt;/HEAD&gt;
&lt;SCRIPT language=&quot;JavaScript&quot;&gt;
&lt;!--
menuCerrado = new Image();
menuCerrado.src = &quot;obook.gif&quot;;
menuAbierto = new Image();
menuAbierto.src = &quot;cbook.gif&quot;;

function cambiaImagen(){
	if(this.imagen.src==menuCerrado.src){
		this.imagen.src=menuAbierto.src;
	}else{
		this.imagen.src=menuCerrado.src;
	}
	//alert(img.id);
}

function AsignaValoresObj(){
	htmStr='&lt;img src=&quot;' + menuAbierto.src + '&quot; id=&quot;img' + this.id + '&quot;&gt; Soy el ' + this.id;
	this.innerHTML = htmStr;
	this.posTop = Math.round(Math.random() * document.body.clientHeight);
	this.posLeft = Math.round(Math.random() * document.body.clientWidth);
	this.ancho = 100;
	objImg = eval(&quot;img&quot; + this.id);
	this.imagen = objImg;
	this.cambio = cambiaImagen;
	with(this.style){
		backgroundColor = &quot;#ffaa55&quot;;
		pixelTop = this.posTop;
		pixelLeft = this.posLeft;
		cursor = &quot;hand&quot;;
		font = &quot;9pt Arial&quot;;
	}
}

function creaObj(numObj){
	for (i=1; i&lt;=numObj; i++){
		nombreObj = 'Objeto' + i;
		definirDiv = '&lt;div id=&quot;' + nombreObj + '&quot; STYLE=&quot;position:absolute&quot; onclick=&quot;this.cambio()&quot;&gt;&lt;/DIV&gt;';
		document.body.insertAdjacentHTML(&quot;BeforeEnd&quot;,definirDiv);
		objActual = eval(nombreObj);
		objActual.AsignaValores = AsignaValoresObj;
		objActual.AsignaValores();
	}
}

//--&gt;
&lt;/script&gt;
&lt;/HEAD&gt;
&lt;BODY BGCOLOR=&quot;#FFFFFF&quot; onload=&quot;creaObj(15);&quot;&gt;

&lt;/BODY&gt;
&lt;/HTML&gt;

Espero que te ayude. Saludos.