reescribir código

Bravenap · #1 (**permalink**) 17/11/2002, 16:39

Una pregunta que seguro tiene fácil solución:

Dentro de <body>:

<script language"JavaScript">
function creaCapa(nombre) {
write("<layer src=\"" + nombre + ".htm\" width=540 height=265></layer>");
}
</script>

<a href="#" onClick="creaCapa(habitacion)"><img src="../imagenes/habitacion.gif" width="81" height="34" border="0"></a>

<a href="#" onClick="creaCapa('sinonimia')"><img src="../imagenes/sinonimias.gif" width="81" height="34" border="0"></a>

Me gustaría que al pinchar sobre una u otra imagen se escribiera un código diferente (por tanto se crearía una capa diferente) pero en el documento actual y no en otro nuevo.

Una opción es reescribir toda la página con la modificación nueva, pero eso ralentizaría todo, ya que es una página bastante grande.

Otra es mostrar u ocultar las capas con comportamientos de los enlaces, pero pienso no sólo en crear capas sino cualquier otro objeto.

A lo mejor no hay que utilizar document.write.
Creo que más o menos se entiende ¿no?. Muchas gracias.

KarlanKas · #2 (**permalink**) 18/11/2002, 10:54

Hay varias posibilidades. Una es el mostrar y ocultar capas. Esa solución la utilicé en www.notariadeleganes.com. Otra es utilizar innerHTML, esta otra la usé en www.agricolamecanica.com.

Te recomiendo que si es muy grande que utilices innerHTML aunqeu lo malo es que sólo es compatible con el IE y con NS a partir del 6.0

Sólo tendrías que hacer una capa de menú y otra de contenido. En la de menú varios hiperenlaces como los que tienes y en la capa de contenido cambiar el mismo con una variable. Por ejemplo sería:
<head>
<script>
opcion1="<b>Opcion 1</b><br><br>Esta es la opcion numero uno. si quiere puede ir atrás pinchando <a href='javascript:history.back(1)'>aqui</a>.";

opcion2="<b>Opcion 2</b><br><br>Esta es la segunda opcion.";

function cambio(capa){
document.getElementById("contenido").innerHTML=cap a;
}

</script>
</head>
<body>
<div id="menu" style="position:absolute;top:100px;left:20px;width :80px;height:400px;">

<a href="#" onClick="cambio('Opcion1')"><img src="../imagenes/habitacion.gif" width="81" height="34" border="0"></a>

<a href="#" onClick="cambio('Opcion2')"><img src="../imagenes/sinonimias.gif" width="81" height="34" border="0"></a>
</div>
<div id="contenido" style="position:absolute;top:100px;left:200px;widt h:400px;height:400px;">

</DIV>
</body>

No lo he probado, pero supongo que servirá...

Bravenap · #3 (**permalink**) 18/11/2002, 12:12

Hola KarlanKas:

He probado tu código y funciona salvo por una cosilla: tan sólo escribe en la capa opcion1 u opcion2 por lo tanto no considera las variables definidas en el script.

Ahora bien, aunque no es lo que me interesaba en un principio, cómo se haría para que en lugar de un texto introdujera un documento htm en la capa. Supongo que de manera similar sólo que ya no se usaría innerHTML.

Y ahora, (espero no abusar) lo probado también para escribir dentro de una celda de una tabla y funciona pero ¿se puede meter un htm (como antes) dentro de la celda?. La verdad es que nunca lo he probado.

Gracias por todo.

. · #4 (**permalink**) 18/11/2002, 13:33

hola si usas innerHTML ya no es necesario que utilices capas a menos que asi tenga que ser, la funcionalidad de las capas es que las puedes mantener ocultas y mostrarlas cuando quieras,

en el caso del innerHTML lo que hace es introducir html dentro del documento en algun lugar que le hayas identificado con algun "id"

ya sea desde una tabla hasta un iframe o lo que se te ocurra

KarlanKas · #5 (**permalink**) 18/11/2002, 18:21

Bravenap!

Se me colaron unas comillas y me confundí con unas mayusculas. El código quedaría como sigue:

<html>
<head>
<script>
opcion1="<b>Opcion 1</b><br><br>Esta es la opcion numero uno. si quiere puede ir atrás pinchando <a href='java script:history.back(1)'>aqui</a>.";
opcion2="<b>Opcion 2</b><br><br>Esta es la segunda opcion.";

function cambio(capa){
document.getElementById("contenido").innerHTML=cap a;
}

</script>
</head>
<body>
<div id="menu" style=" position:absolute;top:100px;left:20px;width:80px;h
eight:400px;">

<a href="#" onClick="cambio(opcion1)"><img src="../imagenes/habitacion.gif" width="81" height="34" border="0"></a>

<a href="#" onClick="cambio(opcion2)"><img src="../imagenes/sinonimias.gif" width="81" height="34" border="0"></a>
</div>
<div id="contenido" style=" position:absolute;top:100px;left:200px;width:400px
;height:400px;">

</DIV>
</body>

</html>

Y sí que lo puedes meter en una celda, pero tienes que definir esa celda con un id (<td id="contenido">)

Espero que te sirva