Hola Caricatos :)
Gracias por responder, te cuento:
Estoy experimentando con los eventos, poca cosa, me encuentro en la fase de "a ver que pasa si quito esto..." y tratando de ampliar un poco mis nociones de css.
Leí un tutorial muy interesante sobre efectos con imagenes sin js, solo con css y al mismo tiempo me topé con la directiva "focus" de css. Y entonces me di cuenta que con ese sistema podía hacer mi web más rápida.
Como está hecha con solo html y cada página tiene un poco de texto, pensé...
¿ y si diseño los botones en css cómo en el tutorial (dando unas coordenadas a la imagen según los movimientos del ratón) y añado por mi parte una imagen para "focus"'? ...
De esa manera, podría agrupar en una sola página lo que ahora tengo en 10, bastaría poner 10 div, cada uno con su texto, y cada <div> se mostraría haciendo onclic sobre un botón diferente. Así no tendrían que cargarse continuamente las páginas.
Ahora lo tengo así
Como verás, los botones tienen un efecto con js y el onclic carga otra página html.
La idea va en esta dirección
El efecto está hecho con css, pero tenía que buscar una manera para alternar las capas.
Entonces recordé que en el ScriptMaster había visto "algo" parecido a lo que quería, y, efectivamente, era esto:
Cita: <html>
<head>
<!-- PRIMER PASO: Copiar dentro del tag HEAD -->
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Gregor (
[email protected]) -->
<!-- Begin
var ie4 = (document.all) ? true : false;
var ns4 = (document.layers) ? true : false;
var ns6 = (document.getElementById && !document.all) ? true : false;
function hidelayer(lay) {
if (ie4) {document.all[lay].style.visibility = "hidden";}
if (ns4) {document.layers[lay].visibility = "hide";}
if (ns6) {document.getElementById([lay]).style.display = "none";}
}
function showlayer(lay) {
if (ie4) {document.all[lay].style.visibility = "visible";}
if (ns4) {document.layers[lay].visibility = "show";}
if (ns6) {document.getElementById([lay]).style.display = "block";}
}
function writetolayer(lay,txt) {
if (ie4) {
document.all[lay].innerHTML = txt;
}
if (ns4) {
document[lay].document.write(txt);
document[lay].document.close();
}
if (ns6) {
over = document.getElementById([lay]);
range = document.createRange();
range.setStartBefore(over);
domfrag = range.createContextualFragment(txt);
while (over.hasChildNodes()) {
over.removeChild(over.lastChild);
}
over.appendChild(domfrag);
}
}
// End -->
</script>
</head>
<body>
<!-- SEGUNDO PASO: Copiar dentro del tag BODY -->
<SPAN ID="newlayer" style="position:absolute;">layer-text</SPAN>
<br><br><br>
<a href="javascript
:hidelayer('newlayer');">hide layer</a> |
<a href="javascript
:showlayer('newlayer');">show layer</a> |
<a href="javascript
:writetolayer('newlayer','layer-text #1');">layer-text #1</a> |
<a href="javascript
:writetolayer('newlayer','layer-text #2');">layer-text #2</a>
</body>
</html>
Funciona asi
Lo que yo quiero es precisamente lo que realiza la funcion writetolayer, el problema es que no puedo poner todo el texto entre las comillas simples
Cita: <a href="javascript:writetolayer('newlayer','layer-text #1');">layer-text #1</a>
No quedaría elegante ... ¿o sí? ... además, me gustaría validar el código y me parece que esa manera de definir los enlaces ( =javascript
:" ..) no pasa la validación del consorcio.
Intuyo que todo esto es muy básico, es muy probable que me esté haciendo yo solita la empanada total ... puede que se resuelva simplemente con css ... no sé ... yo creía que la solución era utilizar las dos primeras funciones ...
He llegado hasta aquí
pero lo que intento es quitar las opciones "ocultar capa1" y "ocultar capa2" y que esas acciones se realicen automáticamente desde los botones. Como verás tampoco consigo mantener el estilo de los textos.
Lamento mucho estar en esta etapa preescolar, gracias por la paciencia.
