Swapping images depending on iframe content

[winntshawn]

Hi there,

I've run into a bit of a roadblock, and I'm hoping that someone here can help me.

The Situation:
===========
I have an HTML wrapper (called "main.html") which has the following elements:
- a <DIV> called "titlebar", across the top of the page
- a <DIV> called "toc", along the left side pf the page
- an <IFRAME> called "ContentFrame"

In the "toc", I have a list of topics (images with blue backgrounds) which, when clicked, open an html page in "ContentFrame". What I need to do is have a different image (an image with a green background) displayed in the "toc" depending on what page is open in "ContentFrame", to show the user which item in the "toc" is being displayed.

The Problem:
==========
I have written a javascript function which allows me to:
a) find out which page is loaded in "ContentFrame"
b) swap the corresponding image (to one with a green background) in the "toc"

However, I cannot figure out how to get the function to change the image back to it's orginal (blue background) image if it's not the content that's being displayed in the <IFRAME>.

Here's the function:

function showProgress() {
// get the name of the page to find the right image
var iframeSrc = parent.frames.ContentFrame.document.location.href
var iframePageName = iframeSrc.substring(iframeSrc.length -8)
var iframeParse = iframePageName.substring(0, 3)

// get all images from the table of contents
var x = 0
var tocImages = parent.document.getElementById("toc").getElementsByTagName("img")
var currentImgStr, newImgSrc, oldImgSrc

// cycle through the images and swap the correct one
while (x<tocImages.length) {
currentImgStr = tocImages[x].src.substring(tocImages[x].src.length -7, tocImages[x].src.length -4)
oldImgSrc = tocImages[x].src.substring(tocImages[x].src.length -7)
newImgSrc = iframeParse + "_current.png"

if (iframeParse == currentImgStr) {
tocImages[x].src = newImgSrc
} else {
tocImages[x].src = oldImgSrc
}
x++
}
}


I have this function fire whenever a page is loaded into the <IFRAME>.

Any help would be appreciated. If you need more info, please post.

Thanks in advance!

Cheers,
Shawn

[winntshawn]

Maybe a little clarification is needed for the javascript function:

The Files:
========
To keep things simple, I have modified all the file names to be consisitent.
For each piece of content I need to display in the <IFRAME>, I have:
- an HTML file with the content (i.e., m01.html)
- an image for the "toc" that links to the content (i.e., m01.png)
- an image to identify that topic as currently being displayed (i.e., m01_current.png)

The Function:
===========


function showProgress() {
// get the name of the page to find the right image
var iframeSrc = parent.frames.ContentFrame.document.location.href
var iframePageName = iframeSrc.substring(iframeSrc.length -8)
var iframeParse = iframePageName.substring(0, 3)

// get all images from the table of contents
var x = 0
var tocImages = parent.document.getElementById("toc").getElementsByTagName("img")
var currentImgStr, newImgSrc, oldImgSrc

// cycle through the images and swap the correct one
while (x<tocImages.length) {
currentImgStr = tocImages[x].src.substring(tocImages[x].src.length -7, tocImages[x].src.length -4)
oldImgSrc = tocImages[x].src.substring(tocImages[x].src.length -7)
newImgSrc = iframeParse + "_current.png"

if (iframeParse == currentImgStr) {
tocImages[x].src = newImgSrc
} else {
tocImages[x].src = oldImgSrc
}x++}
}


The first section helps to identify which file (m01.html, m02.html, etc.) is loaded into the <IFRAME>. Based on this, I can then figure out which image pairs (m01.png/m01_current.png, m02.png/m02_current.png, etc.) I need to work with.

The function works to swap the image to the "current" version when content is loaded, but I can't get it to swap the image back to it's original state when it's not the current content displayed in the <IFRAME>.

Hope this helps!

Cheers,
Shawn

[fishluvr]

If any of the images were "_current" oldImgSrc would be "ent.png"...

Try:
while (x<tocImages.length) {
currentImgStr = tocImages[x].src.substring(tocImages[x].src.length -7, tocImages[x].src.length -4);
oldImgSrc = tocImages[x].src.substring(tocImages[x].src.lastIndexOf("/")+1);
newImgSrc = iframeParse + "_current.png";

if (iframeParse == currentImgStr) tocImages[x].src = newImgSrc;
else tocImages[x].src = oldImgSrc.replace("_current","");
x++;
}