Hi,
I'm a newbie and trying to use javascript to hide or display different divs within a single IFRAME. I can't seem to get the syntax right... the Iframe, ID "frame", has 5 div's which I want to show depending on what link someone clicks.
here's the js :
<script type="text/javascript">
<!--
var iframe = document.getElementByID("frame");
var info = iframe.contentDocument
function showFrame(page)={
iframe.style.display="block";
if (page = 'weak') {
info.getElementByID("weak").style.display = "block";
} else if (page = 'decap') {
info.getElementByID("decap").style.display = "block";
} else if (page = 'fire') {
info.getElementByID("fire").style.display = "block";
} else if (page = 'peppers') {
info.getElementByID("peppers").style.display = "block";
} else if (age = 'bottles') {
info.getElementByID("bottles").style.display = "block";
} else { iframe.style.display="hidden";}
}
//-->
</script>
and here's the html
<body>
<div id="container">
<div id="top">
<img src="dhlogo.gif" id="logo"/>
<img src="tagline.jpg" id="logo"/>
</div>
<div id="decap">
<a href=
"#" onclick=
"showFrame('weak')"><img src=
"weaksaucelogo.jpg" width=
"224" height=
"144" /></a>
<a href=
"#" onclick=
"showFrame('decap')"><img src=
"decapsaicinlogo.jpg" /></a>
<a href=
"#" onclick=
"showFrame('fire')"><img src=
"fireandice.jpg" /></a>
<p>
<a href=
"#" onclick=
"showFrame('peppers')"><img src=
"pepperinfo.jpg" /></a>
<a href=
"#" onclick=
"showFrame('bottles')"><img src=
"bottleinfo.jpg" /></a>
<img src="shake.jpg" />
</p>
<p><a href=
"mailto:decaphotsauce@gmail.com"><img src=
"email.jpg"><
/img></a></p></div>
<iframe width="400px" height="500px" scrolling="no" frameborder="0" src="frame.html" id="frame" name="frame" style="left:50%; margin-left: -200px; position:absolute; top:50%; margin-top:-250px; display: none;" ></iframe>
</div>
</body>
and here's frame.html :
<body>
<a href=
"javascipt:hideFrame()"><img src=
"bones2.gif" id=
"bones" style=
"border:none"/></a>
<div id="info">
<div
name=
"weak" id=
"weak" style=
"display: hidden;"><img src=
"weakinfo.jpg" /></div>
<div
name=
"decap" id=
"decap" style=
"display: hidden;"><img src=
"decapsininfo.jpg" /></div>
<div
name=
"fire" id=
"fire" style=
"display: hidden;"><img src=
"fireinfo.jpg" /></div>
<div
name=
"peppers" id=
"peppers" style=
"display: hidden;"><img src=
"pepperinfotext.jpg" /></div>
<div
name=
"bottles" id=
"bottles" style=
"display: hidden;"><img src=
"recycle.jpg" /></div>
</div>
</body>
Perhaps there's a better way to approach this all together... as I said I'm a newb and any help would be greatly appreciated. Also, how do I close the iframe from within the iframe? I'm not sure that the javascript
:Hideframe command is gonna work.
thanks again,
Andrew
Unsolved 
Offline 
