Cargar contenido en una capa

spaincreative · #1 (**permalink**) 06/04/2004, 14:45

Muy buenas planteo algo que no se si se puede hacer:

puedo a traves de un enlace (imagen-boton) cargar un contenido
(ya sea un texto, una imgen, un flash...) en una capa que tenga puesta en la misma página?

gracias

PatomaS · #2 (**permalink**) 06/04/2004, 15:38

Hola

En principio, en una capa, solo puedes modificar las propiedades de algo ya cargado. Tambien puedes modificar las propiedades de dicha capa, por lo que podrías esconder la capa que tiene un contenido y hacer que aparezca otra en vez de la primera al presionar el botón que mencionas.

Espero haberme explicado

Suerte

Felicidad

KarlanKas · #3 (**permalink**) 07/04/2004, 00:34

Con JS se puede hacer:

Suponiendo que la capa se llame "capa" (hoy estoy original) puedes hacer lo siguiente con los botones:

------------------------------------

EN EL HEAD:
<script>
imagen='<img src="http://www.karlankas.net/transmutado.jpg">'
texto='Pablito clavó un clavito, ¿qué clavito clavó Pablito?';
function poner(esto){
document.getElementById("capa").innerHTML=esto;
}
</script>

EN EL BODY:

<a href="#" onclick="poner(texto);return false">
<img src="http://www.forosdelweb.com/images/profile.gif"
border="0">
</a>
<br>
<br>
<a href="#" onclick="poner(imagen);return false">
<img
src="http://www.forosdelweb.com/images/sendpm.gif"
border="0">
</a>
<br>
<br>
<div id="capa"></div>

---------------------------------------

Y ahora nos vamos a Javascript!

spaincreative · #4 (**permalink**) 07/04/2004, 12:04

Karlankas BINGO!!

pero yo he querido ir a más y me la he pegado he intentado cargar contenidos en dos capas distintas en la misma página y he puesto esto:

<script>
imagen='<img src="http://www.spaincreative.com/avatar_DMSTK.gif">'
texto='Pinchando en perfil aparece este texto <b>esta wuay</b> y si pincho en mp aparece mi avatar ok? ';
function poner(esto){
document.getElementById("capa").innerHTML=esto;
}
</script>
<script>
imagen2='<img src="IMAGENES/avatar_DMSTK.gif">'
function poner(esto){
document.getElemntById{"capa02").innerHTML=esto;
}
</script>
</head>

<body>

<p><a href="#" onclick="poner(texto);return false">
<img src="IMAGENES/profile.gif" width="55" height="17" border="0"></a>
<br>
<br>
<a href="#" onclick="poner(imagen);return false">
<img src="IMAGENES/sendpm.gif" width="55" height="17" border="0"></a>
<br>
<br>
<a href="#" onclick="poner(imagen2);return false">
<img src="IMAGENES/profile.gif" width="55" height="17" border="0"></a>
<br>
<br>
<div id="capa"><br>
</div>
<br>
<br>
<div id="capa02" ><br>
</div>

</body>

pero no me sale nada? eso se hace así o hay otra manera? y otra cosa, esto sirve para todos los navegadores?

gracias.

PatomaS · #5 (**permalink**) 08/04/2004, 03:01

Hola

Bueno, tras la respuesta de KarlanKas, estuve revisando y ciertamente ya aprendí algo más...

:)

Gracias

Bueno, lo que vi, es que esta propiedad o funcionalidad, es parte del DOM 0, lo cual hace que realmente no esté soportada de forma adecuada en los navegadore, o al menos eso se supone ya que ellos dicenque soportan el DOM Core, 1, 2 y 3. Sin embargo, el hecho, es que funciona en todo o casi todos los navegadores mdoernos, yo he probado un par de códigos en:

- firefox 0.8
- opera 7.23
- mozilla 1.6
- netscape 7
- explorer 6.0 sp1

Felicidad

PatomaS · #6 (**permalink**) 08/04/2004, 03:07

Hola

Justo tras enviar el mensaje anterio, seguí revisando unas cositas más y vi esto...

http://www.mozilla.org/docs/web-deve...ade_2.html#dom

Ahí verán lo que mencionaba y lo que había leido en el w3c, el innerHTML no está soportado, sinembargo, los navegadores a fin de aprovechar la potencia de un comando tan util como ese, le dan soporte.

Claro que hay un pequeño truco para hacer el innerHTML y otros comando así "aceptados" por las reglas y es usar el getElementById o el getElementByTagName.

Felicidad

KarlanKas · #7 (**permalink**) 08/04/2004, 06:18

Vamos a hacer que se pueda elegir la capa donde actuar:

Código PHP:

  <html>

<head>

    <title>Untitled</title>

 
<script>

imagen='<img src="http://www.spaincreative.com/avatar_DMSTK.gif">'

imagen2='<img src="IMAGENES/avatar_DMSTK.gif">'

texto='Pinchando en perfil aparece este texto <b>esta wuay</b> y si pincho en mp aparece mi avatar ok? ';

function poner(esto,donde){

document.getElementById(donde).innerHTML=esto;

}

</script>

</head>

 
<body>

 
<p><a href="#" onclick="poner(texto,'capa');return false">

<img src="IMAGENES/profile.gif" width="55" height="17" border="0"></a>

<br>

<br>

<a href="#" onclick="poner(imagen,'capa');return false">

<img src="IMAGENES/sendpm.gif" width="55" height="17" border="0"></a>

<br>

<br>

<a href="#" onclick="poner(imagen2,'capa02');return false">

<img src="IMAGENES/profile.gif" width="55" height="17" border="0"></a>

<br>

<br>

<div id="capa"><br>

</div>

<br>

<br>

<div id="capa02" ><br>

</div>

 
 
</body>

</html>

Ctrl+C · #8 (**permalink**) 08/04/2004, 22:06

En realdad el codigo de karlankas no es cross-browser, cuidado con eso. Hay mucha pero mucha gente que sigue usando IE 5.

KarlanKas · #9 (**permalink**) 09/04/2004, 04:35

Por eso no te preocupes, Ctrl+C, innerHTML es compatible con IE a partir del 5.0 y con NS a partir de la versión 6.0. Lo mismo que getElementById.

caricatos · #10 (**permalink**) 09/04/2004, 05:21

Hola a todos:

Hay una forma que admite el DOM (no tengo idea de la versión) para añadir nuevos contenidos: createElement/appendChild

Por ejemplo para añadir una imágen sería:
var unaImagen = createElement("img");
unaImagen.src = "imagen.gif";
document.body.appendChild(unaImagen);

Lo que pasa con este sistema es que los textos hay que crearlos con otro tipo de función (createTextNode()), y la tarea se vuelve algo compleja...

var unDiv = document.createElement("div");
var unaCita = document.createElement("cite");
var unTexto = document.createTextNode("texto en cursiva");
unaCita.appendChild(unTexto);
unDiv.appendChild(unaCita);
document.body.appendChild(unDiv);

Saludos

Ctrl+C · #11 (**permalink**) 09/04/2004, 10:26

Cita:

Por eso no te preocupes, Ctrl+C, innerHTML es compatible con IE a partir del 5.0 y con NS a partir de la versión 6.0. Lo mismo que getElementById.

no me referia a innerhtml, me referia a la forma en que haces referencia a las capas.

esto es lo que vos propones:

DOM = (document.getElementById ? 1 : 0);

esto es lo que yo agregaria:

IE5 = (document.all && !document.getElementById ? 1 : 0);

KarlanKas · #12 (**permalink**) 09/04/2004, 15:52

Cita:

Mensaje Original por Ctrl+C

no me referia a innerhtml, me referia a la forma en que haces referencia a las capas.

La forma que me refiero a las capas es con getElementById... no te entiendo...

Cita:

esto es lo que vos propones:

DOM = (document.getElementById ? 1 : 0);

esto es lo que yo agregaria:

IE5 = (document.all && !document.getElementById ? 1 : 0);

No sé si eso me lo dices a mi, pero no propongo eso, es más, creo que se te ha colado el paréntesis, lo que debería poner es:
DOM = (document.getElementById) ? 1 : 0;

Aunque yo nunca he puesto eso. Si lees el código verás que no hago ninguna comprobación en el código. La verdad es que no entiendo nada de lo que quieres decir con tu último mensaje.

Ctrl+C · #13 (**permalink**) 10/04/2004, 01:17

todo bien, no importa :)

escribir:

Código PHP:

  DOM = (document.getElementById ? 1 : 0);

es lo mismo que escribir:

Código PHP:

  if (document.getElementById) {

   DOM = true;

}

else {

    DOM = false;

}

saludos

KarlanKas · #14 (**permalink**) 10/04/2004, 04:37

Muchas gracias por la información, aunque ya lo sabía. Es más, ya sabías que lo sabía, ¿no es cierto, Tía Encarnita...?

Ya te descubrí una vez, ¿acaso pensabas que no te iba a "desenmascarar" otra?

¿Hace mucho frío por Cogullos de la Sierra?

Ctrl+C · #15 (**permalink**) 10/04/2004, 05:03

nunca dude de vos karlankas :)

por cierto, ahora me llamo ctrl+c, tiene mas onda y suena mas nerd.

KarlanKas · #16 (**permalink**) 10/04/2004, 05:07

Realmente suena más nerd! (Espero que no te comportes como tal!!

) Y es más acorde con las últimas hornadas. Que bueno volverte a ver por aquí!

Un saludo!

Ctrl+C · #17 (**permalink**) 10/04/2004, 05:17

saludos capo! (...y no le digas a nadie :)

Operadormail · #18 (**permalink**) 18/08/2004, 13:05

HOla a todos:

Parece ser que innerHTML no es soportado por Mozilla 1.7....

Un saludo a todos.