need help with "Switch Content" script

[Carel]

Switch COntent Script (http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm )

I have an index page with 42 thumbnail links and an iFrame. When the page first appears, I would like all thumbnails to be visible on a 1024x768 screen, so I thought of having the page open with a collapsed iframe. After a click on one of the links, the iframe is expanded and stays that way for the duration of the site visit. All the links on the page work with some javascript that repositions the iframe so it is not off screen when a link is clicked on.
Here is the url: www.renedaalder.com .

Trying to get the switch content script to function I have two questions.

The javascript that handles linking and repositioning is in the body of the page and goes:

<script language=Javascript>
function showImage(PageName)
{
frames[0].location = PageName+'.html'
window.scroll(0,0)
}
</script>

The links look like: javascript: showImage('pagename')

Now I would like to refer to the instructions on the Switch Content page:

"1) Create the header that will expand a content when clicked on. Here's an example:

<h3 onClick="expandcontent('sc1')" style="cursor:hand; cursor:pointer">
What is JavaScript?</h3>"


As the function showImage is called on a click, I thought I could leave out the "onclick" part and include "expandcontent('sc1')" in the script that is already on the page, so that it would become something like this:

<script language=Javascript>
function showImage(PageName)
{
expandcontent('sc1') // <-------- added
frames[0].location = PageName+'.html'
window.scroll(0,0)
}
</script>

Is this correct??

My second question deals with the correct pasting of the second piece of html:

"2) Specify the content that will be associated with the above and become expandable:

<div id="sc1" class="switchcontent">
JavaScript is a scripting language originally developed by Netscape.....
</div> "

The iframe I want to start out collapsed is wrapped in <div> </div> and looks like this:

<div id="Oobj3" style="position:absolute;z-index:38;visibility:visible; left:130px;top:99px;width:766px;height:305px;font-size:1px;">
<iframe id="Iframe1" name="frame1" src="white_slave.html" width="766" height="305" frameborder="0" scrolling="no" >
<ilayer id="Iframe1" name="frame1" src="white_slave.html" width="766" height="305" clip="0,0,766,305">
</ilayer>
</iframe>
</div>

Do I just change id="Oobj3" to: id="sc1" class="switchcontent" or do I also change the iframe id to cs1?

[jscheuer1]

If I follow you correctly, question 1:

Yes but, a semicolon may be required:


<script language=Javascript>
function showImage(PageName)
{
expandcontent('sc1'); // <-------- added
frames[0].location = PageName+'.html'
window.scroll(0,0)
}
</script>expandcontent (the function) and whatever sc1 refers to must be available to (usually that means parsed or read by) the browser before showImage is run. And the two scripts cannot be in conflict. If you are already running them together on the page, these things are probably in order.

#2:

That could work but, the inline style (or parts of it) for the div will have to go if it/they conflict with the class or id definitions in the style section of the page and (possibly) as defined in the script. I'm not sure where you are getting cs1 from but, if it is used by the script and/or the style to configure and/or manipulate the iframe yes, use it.

[Carel]

Thanks. This info will make troubleshooting manageble I hope.