link dentro de div no llama a funcion js

pcarvajal · #1 (**permalink**) 18/10/2007, 17:05

Hola,
Desde un link llamo a una funcion que deja visible a un div
Ese div contiene un link que llama a la funcion que lo oculta.
El problema es que en IE ese lnk no me funciona pero en FF si.
Alguien sabe que puede estar pasando?

Aqui les dejo el codigo:

Cita:

KarlanKas · #2 (**permalink**) 19/10/2007, 03:14

A ver si así...

Código:

<html>
<head>
<script language="javascript">

function esta(a){
return document.getElementById(a);
}

function accion(e){

esta('imagen').style.visibility =e;

capa=(e=="hidden")?"picture":"mostrar";
capa2=(e!="hidden")?"picture":"mostrar";

esta(capa).style.visibility ="hidden";
esta(capa2).style.visibility ="visible";

}


</script>
<style>
#imagen{
width:200px;
height:250px;
border:solid 1px black;
background:silver;
visibility: hidden;
}
</style>
	<title>Untitled</title>
</head>

<body>
	<center>
		<a href="#" id="mostrar" onclick="accion('visible');return false">show div</a>

		<div id="imagen">

			<img src="http://www.karlankas.net/karlankas.jpg" />
			
			<div id='picture'>
				<a href='#' onclick="accion('hidden');return false">cerrar div</a>
			</div>
		</div>
	</center>
</body>
</html>

Un saludo!

pcarvajal · #3 (**permalink**) 23/10/2007, 10:22

Gracias KarlanKas, funciona a las mil maravillas.

Traté de seguir el codigo para entenderlo, pero hubo una parte que no entendí. Podrías explicarme que hacen estas lineas por favor??

Cita:

capa=(e=="hidden")?"picture":"mostrar";
capa2=(e!="hidden")?"picture":"mostrar";

Saludos y gracias nuevamente

KarlanKas · #4 (**permalink**) 23/10/2007, 10:28

No veas lo que me alegra que digas eso.

La fórmula que dices es un if... else reducido. Viene a ser algo así:

capa=(e=="hidden")?"picture":"mostrar";

if(e=="hidden"){
capa="picture"
}
else{
capa="mostrar"
}

Es decir:
variable=(condicion)?valor si se cumple la condición:valor si no se cumple la condición;

En el script lo que hace es elegir la capa que se enseña y la capa que se oculta a cada momento. Ya que la capa2 será la que luego se vea y la capa1 será la que se oculte.

¿Me he explicado?

pcarvajal · #5 (**permalink**) 24/10/2007, 15:04

más claro hecharle agua!! y eso que soy medio duro de cuesco, pero al final entendi

Me asalta otra duda..
Tengo una funcion que parametricamente carga una imagen en un innerhtml, y lo que estoy tratando de hacer es que mientras carga la imagen me cargue un "loading.gif". La idea es la de siempre, que muestre el cargando, pero que cuando carge la imagen correspondiente, el "loading" desaparezca.

Este es el codigo (espero no andar tan perdido)

Cita:

function muestra(img){
var x;
x="<table width='100%' height='100%' border='0'><tr><td align='center' >";
x+="<table bgcolor='white' cellspacing='10'><tr><td><div style='position: static;'><img src='imagenes/loading.gif'></div>";
x+="<img src='" + img + "' border='0'><br><br>";
x+="</td></tr></table>" ;
x+="</td></tr></table>";
picture.innerHTML = x;
}

KarlanKas · #6 (**permalink**) 25/10/2007, 01:31

Para eso lo mejor tal vez sea crear una imagen oculta que precargue las imágenes. Algo así:

Código:

<html>
<head>
<script language="javascript">

function esta(a){
return document.getElementById(a);
}

function accion(e){

esta('imagen').style.visibility =e;

capa=(e=="hidden")?"picture":"mostrar";
capa2=(e!="hidden")?"picture":"mostrar";

esta(capa).style.visibility ="hidden";
esta(capa2).style.visibility ="visible";


}
temporale="https://marketplace.slizone.com/SliMarketplace/Images/loading.gif";
function cargar(imagen){

esta("destino").src=temporale;
setTimeout("accion('visible')",500);
esta("temporal").src=imagen;  
}

</script>
<style>
#temporal{
display:none;
}
#imagen{
overflow:show;
border:solid 1px black;
background:white;
visibility: hidden;
}
</style>
	<title>Untitled</title>
</head>

<body>
	<a href="#" onclick="cargar('http://www.wallpaperbase.com/wallpapers/celebs/adrianeartiles/adriane_artiles_2.jpg');return false;">Ver chica guapa 1</a>	<br>
		<a href="#" onclick="cargar('http://www.wallpaperbase.com/wallpapers/celebs/adrianeartiles/adriane_artiles_6.jpg');return false;">Ver chica guapa 2</a>	<br>
		<a href="#" onclick="cargar('http://www.wallpaperbase.com/wallpapers/celebs/adrianeartiles/adriane_artiles_4.jpg');return false;">Ver chica guapa 3</a>	<br>
		
	<center>
		<a href="#" id="mostrar" onclick="accion('visible');return false">show div</a>

		<div id="imagen">

			<img name="destino" id="destino" src="http://www.butterflytmsport.com.ar/images/no_image.jpg" />
			
			<div id='picture'>
				<a href='#' onclick="accion('hidden');return false">cerrar div</a>
			</div>
		</div>
	</center>


<img 	name="temporal" 
		id="temporal" 
		src="" 
		onload="document.images['destino'].src=this.src;" 
		onerror="http://www.butterflytmsport.com.ar/images/no_image.jpg"/>
</body>
</html>

Dime si es lo que quieres. Y perdona si las imágenes son demasiado sugerentes.... (trialorololooo) pero son las únicas imágenes grandes grandes que he encontrado para que veas lo que hace en la tardanza.

pcarvajal · #7 (**permalink**) 25/10/2007, 13:47

Es precisamente lo que te preguntaba.
A pesar de que el codigo me da un error al cargarlo por primera vez (line 67, error de sintaxis), funciona perfecto. Una observación al respecto es que al darle click por primera vez a un enlace que cargue una foto, aparece "Imagen No Disponible" y luego la del "Loding", del segundo click en adelante solo aparece el "Loading".
Por otra parte, implementé una solución bastaaaaante primitiva (pero al menos efectiva, no me pidas más..) para el código que te habia puesto más arriba. No es tan elaborada ni tan buena como la que me has presentado, pero me gustaria que la miraras:

Cita:

function muestra(img){
var x;
x="<table width='100%' height='100%' border='0'><tr><td align='center' >";
x+="<table bgcolor='white' cellspacing='10'><tr><td><div style='position: absolute;'><img src='loading.gif'></div>";
x+="<div style='position: relative;'><img src='" + img + "' border='0'></div><br><br>";
x+="</td></tr></table>" ;
x+="</td></tr></table>";
picture.innerHTML = x;
}

O sea, lo logré con 2 miserables divs.

En IE funciona bien (me muestra el loading y luego la foto encima), en FF me muestra el icono de imagen del "loading" y luego me muestra la segunda imagen encima.
El único detalle que tiene es que como la carga es tan rápida, en FF no me alcanza a mostrar la imagen del "loading". Revisando el codigo que tu creaste, vi que usas el settimeout para hacer una delay entre las fotos. La pregunta es: es posible implementarlo en mi roca-codigo?

Cita:

function muestra(img){
var x;
x="<table width='100%' height='100%' border='0'><tr><td align='center' >";
x+="<table bgcolor='white' cellspacing='10'><tr><td>"
x+=<div style='position: absolute;'><img src='loading.gif'></div>";
// aqui un settimeout -->
x+="<div style='position: relative;'><img src='" + img + "' border='0'></div><br><br>";
x+="</td></tr></table>" ;
x+="</td></tr></table>";
picture.innerHTML = x;
}

PD: No conocía al bombón de las fotos... por un momento dejé de pensar en la gestora de mis poluciones nocturnas llamada Veronica Zemanova :P

pcarvajal · #8 (**permalink**) 29/10/2007, 07:59

arriba!!
(no quiero quedarme con la duda)

KarlanKas · #9 (**permalink**) 29/10/2007, 08:41

El settimeout lo pongo para que no aparezca el icono de no hay imágen. Para dar tiempo a cargarse la nueva imagen. En tu caso... no es necesario si se carga rápido la imagen...

pcarvajal · #10 (**permalink**) 29/10/2007, 09:05

pues quizás no es necesario, pero igual quiero saber como se hace.. :$

pcarvajal · #11 (**permalink**) 30/10/2007, 13:34

no hay quorum?