Problema con iframe

[vesvello]

Este es mi problema... Creo una lista y al pulsar en ella (onclick event) quiero que me abra distintos iframes por cada uno de los elementos de la lista...

<a href="#" onclick="crearFrame()">League Rules </a>
<a href="#" onclick="crearFrame1()">Women Over 30 Division 1</a>
....

Este es el javascript:

<script language="JavaScript">
function crearFrame( ) {
var testFrame = document.createElement("IFRAME");
testFrame.id = "testFrame";
testFrame.src = "rules.html";
testFrame.width = 500;
testFrame.height = 300;
var control = document.getElementById("testFrame")
if (control==null) {
document.body.appendChild(testFrame);
}
}
function crearFrame1( ) {
var testFrame1 = document.createElement("IFRAME");
testFrame1.id = "testFrame1";
testFrame1.src = "http://www.yahoo.es";
testFrame1.width = 500;
testFrame1.height = 300;
var control = document.getElementById("testFrame1")
if (control==null) {
document.body.appendChild(testFrame1);
}

Consigo que me abra los iframes pero se me montan unos encima de otros... que es lo que necesito para que cuando me abra un oculte todos los demas????


llevo peleandome una semana y no concsigo hacer nada al respecto.

[vesvello]

ya lo solucione cambiando el codigo de una forma un poco primitiva pero funciona...

por si a alguien le interesa...

<script language="JavaScript">
function crearFrame( ) {
document.getElementById('theiframe1').style.displa y='block';
document.getElementById('theiframe2').style.displa y='none';
document.getElementById('theiframe3').style.displa y='none';
document.getElementById('theiframe4').style.displa y='none';
document.getElementById('theiframe5').style.displa y='none';
document.getElementById('theiframe6').style.displa y='none';
document.getElementById('theiframe7').style.displa y='none';
document.getElementById('theiframe8').style.displa y='none';
document.getElementById('theiframe9').style.displa y='none';
document.getElementById('theiframe1a').style.displ ay='none';
document.getElementById('theiframe1b').style.displ ay='none';
}
</script>
<script language="JavaScript">
function crearFrame1( ) {
document.getElementById('theiframe2').style.displa y='block';
document.getElementById('theiframe1').style.displa y='none';
document.getElementById('theiframe3').style.displa y='none';
document.getElementById('theiframe4').style.displa y='none';
document.getElementById('theiframe5').style.displa y='none';
document.getElementById('theiframe6').style.displa y='none';
document.getElementById('theiframe7').style.displa y='none';
document.getElementById('theiframe8').style.displa y='none';
document.getElementById('theiframe9').style.displa y='none';
document.getElementById('theiframe1a').style.displ ay='none';
document.getElementById('theiframe1b').style.displ ay='none';
}
</script>

(...)

<script language="JavaScript">
function crearFrame6( ) {
document.getElementById('theiframe7').style.displa y='block';
document.getElementById('theiframe1').style.displa y='none';
document.getElementById('theiframe2').style.displa y='none';
document.getElementById('theiframe3').style.displa y='none';
document.getElementById('theiframe4').style.displa y='none';
document.getElementById('theiframe5').style.displa y='none';
document.getElementById('theiframe6').style.displa y='none';
document.getElementById('theiframe8').style.displa y='none';
document.getElementById('theiframe9').style.displa y='none';
document.getElementById('theiframe1a').style.displ ay='none';
document.getElementById('theiframe1b').style.displ ay='none';
}
</script>
<script language="JavaScript">
function crearFrame7( ) {
document.getElementById('theiframe8').style.displa y='block';
document.getElementById('theiframe1').style.displa y='none';
document.getElementById('theiframe2').style.displa y='none';
document.getElementById('theiframe3').style.displa y='none';
document.getElementById('theiframe4').style.displa y='none';
document.getElementById('theiframe5').style.displa y='none';
document.getElementById('theiframe6').style.displa y='none';
document.getElementById('theiframe7').style.displa y='none';
document.getElementById('theiframe9').style.displa y='none';
document.getElementById('theiframe1a').style.displ ay='none';
document.getElementById('theiframe1b').style.displ ay='none';
}
</script>
<script language="JavaScript">
function crearFrame8( ) {
document.getElementById('theiframe9').style.displa y='block';
document.getElementById('theiframe1').style.displa y='none';
document.getElementById('theiframe2').style.displa y='none';
document.getElementById('theiframe3').style.displa y='none';
document.getElementById('theiframe4').style.displa y='none';
document.getElementById('theiframe5').style.displa y='none';
document.getElementById('theiframe6').style.displa y='none';
document.getElementById('theiframe7').style.displa y='none';
document.getElementById('theiframe8').style.displa y='none';
document.getElementById('theiframe1a').style.displ ay='none';
document.getElementById('theiframe1b').style.displ ay='none';
}
</script>

<script language="JavaScript">
function crearFrame9( ) {
document.getElementById('theiframe1a').style.displ ay='block';
document.getElementById('theiframe1').style.displa y='none';
document.getElementById('theiframe2').style.displa y='none';
document.getElementById('theiframe3').style.displa y='none';
document.getElementById('theiframe4').style.displa y='none';
document.getElementById('theiframe5').style.displa y='none';
document.getElementById('theiframe6').style.displa y='none';
document.getElementById('theiframe7').style.displa y='none';
document.getElementById('theiframe8').style.displa y='none';
document.getElementById('theiframe9').style.displa y='none';
document.getElementById('theiframe1b').style.displ ay='none';
}
</script>
<script language="JavaScript">
function crearFrame1a( ) {
document.getElementById('theiframe1b').style.displ ay='block';
document.getElementById('theiframe1').style.displa y='none';
document.getElementById('theiframe2').style.displa y='none';
document.getElementById('theiframe3').style.displa y='none';
document.getElementById('theiframe4').style.displa y='none';
document.getElementById('theiframe5').style.displa y='none';
document.getElementById('theiframe6').style.displa y='none';
document.getElementById('theiframe7').style.displa y='none';
document.getElementById('theiframe8').style.displa y='none';
document.getElementById('theiframe9').style.displa y='none';
document.getElementById('theiframe1a').style.displ ay='none';
}
</script>


<div id="d_dp1"><a href="#" onclick="crearFrame()">LEAGUE RULES </a></div>
<div id="d_dp2"><div class="cat"><a href="javascript:desplegar('nosotros');">LEAGUE SCHEDULE</a></div>
<ul class="ocultar_menu" id="nosotros">
<li><a href="#" onclick="crearFrame1()">Women Over 30 Division 1</a></li>
<li><a href="#" onclick="crearFrame2()">Women Over 30 Division 2</a></li>
<li><a href="#" onclick="crearFrame3()">Women Over 30 Division 3</a></li>
<li><a href="#" onclick="crearFrame4()">Men Over 30 Division</a></li>
<li><a href="#" onclick="crearFrame5()">Men Over 40 Premier</a></li>
<li><a href="#" onclick="crearFrame6()">Men Over 40 Division 2 </a></li>
<li><a href="#" onclick="crearFrame7()">Men's Open Premier Division</a></li>
<li><a href="#" onclick="crearFrame8()">Men's Open Division</a></li>
</ul></div>
<div id="d_dp3"><a href="#" onclick="crearFrame9()">SCORES</a></div>
<div id="d_dp4"><a href="#" onclick="crearFrame1a()">STANDINGS</a></div>
<div id="d_dp5"><a href="#" onclick="crearFrame1a()">SIGN UP</a></div>


<iframe id="theiframe1" src="rules.html" style="display:none" allowtransparency="true"></iframe>
<iframe id="theiframe2" src="wo30div1.html" style="display:none" allowtransparency="true"></iframe>
<iframe id="theiframe3" src="wo30div2.html" style="display:none" allowtransparency="true"></iframe>
<iframe id="theiframe4" src="wo30div3.html" style="display:none" allowtransparency="true"></iframe>
<iframe id="theiframe5" src="meno30div.html" style="display:none" allowtransparency="true"></iframe>
<iframe id="theiframe6" src="meno40premier.html" style="display:none" allowtransparency="true"></iframe>
<iframe id="theiframe7" src="meno40div2.html" style="display:none" allowtransparency="true"></iframe>
<iframe id="theiframe8" src="mensopenpremier.html" style="display:none" allowtransparency="true"></iframe>
<iframe id="theiframe9" src="mensopendiv2.html" style="display:none" allowtransparency="true"></iframe>
<iframe id="theiframe1a" src="scores.html" style="display:none" allowtransparency="true"></iframe>
<iframe id="theiframe1b" src="standings.html" style="display:none" allowtransparency="true"></iframe>

[JavierB]

Hola vesvello

Ese código habría que reducirlo bastante. Pon los enlaces así:

Código:

<li><a href="#" onclick="crearFrame(1)">Women Over 30 Division 1</a></li>
<li><a href="#" onclick="crearFrame(2)">Women Over 30 Division 2</a></li>
<li><a href="#" onclick="crearFrame(3)">Women Over 30 Division 3</a></li>

Y utiliza esta función:

Código:

<script type="text/javascript">
var ifra = null;
function crearFrame(num) {
  obj = document.getElementById('theiframe'+num);
  obj.style.display = 'block';
  if (ifra!=null && ifra!=obj) ifra.style.display = 'none';
  ifra = obj;
}
</script>

Saludos,

[vesvello]

Gracias por la ayuda... es mi primer codigo en javascript... y no sabia como hacerlo. En serio gracias porque asi puedo estudiarlo y aprender de el

[JavierB]

Me alegro de que te haya servido, pero sobre todo me alegro de que vayas a estudiarlo y de que te sirva para aprender.

Saludos,