Cambiar fondo de layout con botón
Publicado por carlina (31 intervenciones) el 26/02/2014 02:27:26
Hice dos layouts con javascript. Sin Html. Sólo javascript y css. Esos contenedores tienes otros más, como secciones, divs, etec.
Están bien, pero necesito una funcion que cuando yo le de click a un boton me cambie por layout 1 o por layout 2
Ésta es la función para cambiar los layous
No puse el contenido de las funciones layout 1 y layout 2 porque es muy largo, pero se sobre entiende que ahí están dibujados los contenedores.
saludos
Están bien, pero necesito una funcion que cuando yo le de click a un boton me cambie por layout 1 o por layout 2
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//esconder div
document.getElementById('divLayoutGenerdo').style.display = 'none';
document.getElementById('btnMostrar').onclick = validarRadios;
document.getElementById('btnCamiarLayout').onclick =CamiarLayout;
//Primero valido los radios para elegir un layout
function validarRadios(){
var r1 = document.getElementById("radio1");
var r2 = document.getElementById("radio2")
if (r1.checked) {
layout1();
}else if (r2.checked) {
layout2();
} else{alert('falta un radio');
};//alert('hola');
}// función del Layout 1
function layout1(){}
// función del Layout 2
function layout2(){}
Ésta es la función para cambiar los layous
1
2
3
4
5
function CamiarLayout(){
document.getElementById('divLayoutGenerdo').style.display = 'none';
}HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
<header class="mainHead">
<h2>Examen 1 Mejorado<small>Carolina Azofeifa Chinchilla</small></h2>
</header>
<div id="divContent" class="divContent cf">
<form>
<fieldset>
<a href="#"><img src="img/Layout1.png" alt="Layout1" width="400" height="500" class="imgL1"></a>
<a href="#"><img src="img/Layout2.jpg" alt="Layout2" width="400" height="500" class="imgL2"></a>
<p class="radios">
<input type="radio" id="radio1" class="myRadio">
<label for="male">Layout 1</label>
<input type="radio" id="radio2">
<label for="male">Layout 2</label>
</p>
</fieldset>
</form>
<p class="choose">Elija el Layout que desea.</p>
<button id="btnMostrar" class="btn">Mostrar</button>
</div>
<div id="divLayoutGenerdo" class="divLG cf">
<div id="divBtnCambio"><button id="btnCamiarLayout" class="btn">Cambiar Layout</button></div>
</div>
</body>
No puse el contenido de las funciones layout 1 y layout 2 porque es muy largo, pero se sobre entiende que ahí están dibujados los contenedores.
saludos
Valora esta pregunta
0