Ver Mensaje Individual
  #5 (permalink)  
Antiguo 15/07/2012, 13:42
Vincens
 
Fecha de Ingreso: junio-2012
Mensajes: 12
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Haciendo aparecer y desaparecer capas con display: capa original no aparec

Muchas gracias, aunque indirectamente gracias a tu ayuda he conseguido solucionarlo. Si que está todo referenciado (aunque creo que voy a hacer una función para simplificar la captura del nodo abuelo porque hay muchas lineas que se repiten). El problema estaba que en la primera función que ocultaba la capa le ponia el display="none" no al div que era el elemento padre sino al <input> que era el hijo, entonces cuando intentaba cambiar el estado del display no me aparecía nunca el botón porque seguía teniendo el "none". No sé si me he explicado, pongo en rojo donde estaba el fallo, en su lugar debería haber puesto DivPadre.

En todo caso muchísimas gracias porque gracias al uso que has dado a innerHTML he podido ver el problema y aprender como usarlo de esa manera, no se me habría ocurrido nunca.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript">
var marcos, entradaEnlaces, botonAceptar, botonCancelar;

window.onload = function (){
marcos = document.getElementsByName('marco');
entradaEnlaces = document.getElementsByName('introducirLink');
botonAceptar = document.getElementsByName('botonAceptar');
botonCancelar = document.getElementsByName('botonCancelar');

	for(var i=0; i<entradaEnlaces.length; i++){
		entradaEnlaces[i].onclick = introducirDireccion;
	}
	for(var i=0; i<botonAceptar.length; i++){
		botonAceptar[i].onclick = aceptarenlace;
	}
	for(var i=0; i<botonCancelar.length; i++){
		botonCancelar[i].onclick = cancelarenlace
	}
}

    function introducirDireccion(){
    	var divPadre = this.parentNode;
    	var divHijo = this; //??!!
    	var divMarco = divPadre.parentNode;
    	var divAlt = divMarco.getElementsByTagName('div');
    	cambiarDisplayNodos(divHijo, divAlt[1])
    }
    
    //funcion que hace el nodo1 invisible y el nodo 2 visible
    
    function cambiarDisplayNodos(nodo1,nodo2){	

alert("nodo1.innerHTML»\r\n" +nodo1.innerHTML);
alert("nodo2.innerHTML»\r\n" +nodo2.innerHTML);
					
    	if(nodo2.style.display == "none"){
    		nodo2.style.display = "block"
    		nodo1.style.display = "none"
    	} 
    }
    function aceptarenlace(){
    	var direccionFoto = document.getElementById('enlazarfoto').value;
    	var divPadre = this.parentNode;
    	var divMarco = divPadre.parentNode;
    	var divAlt = divMarco.getElementsByTagName('div');
    	var divImg = divAlt[2].getElementsByTagName('img');
    	var comienzoDireccion = direccionFoto.substring(0,7)
    	if(comienzoDireccion.toLowerCase() != "http://"){
    		alert("No has introducido una dirección valida. Asegurate que comience por http://")
    	}
    	else {
    		divImg[0].src = direccionFoto
    		cambiarDisplayNodos(divAlt[1],divAlt[2]);
    	}
    	
    }
    function cancelarenlace(){
    	var divPadre = this.parentNode; alert("divPadre.innerHTML»\r\n" +divPadre.innerHTML)
    	var divMarco = divPadre.parentNode; alert("divMarco.innerHTML»\r\n" +divMarco.innerHTML)
    	var divAlt = divMarco.getElementsByTagName('div'); 
alert("divAlt[1].innerHTML»\r\n" +divAlt[1].innerHTML)
alert("divAlt[0].innerHTML»\r\n" +divAlt[0].innerHTML)
    	divAlt[1].style.display = "none"
    	divAlt[0].style.display = "block"
    }
    
    function validarURL(url) {
    	var re=/^http:\/\/\w+(\.\w+)*\.\w{2,3}$/;
    	return re.test(url);
    }
</script> 
<style type="text/css">

</style>
</head>
<body>
<div id="marco_1" name="marco" draggable="true">
				<div style="display:">
					<input type="button" name="introducirLink" value="Introduce la dirección de la foto"/>
				</div>
				
				<div id="introducirLinkAlt" style="/*display:none*/">
					<input type="text" size="35" id="enlazarfoto" name="enlazarfoto">
					<input type="button" name="botonAceptar" id="botonAceptar" value="Aceptar">
					<input type="button" name="botonCancelar" id="botonCancelar" value="Cancelar" >
				</div>
				
				<div id="foto_1" style="display:none">
					<img src="" width="450px" height="250px">
				</div>
			</div> 
</body>
</html>