"Swap out" graphic in other frame?

[msmith29063]

Is there a way (using Javascript) to replace a banner graphic JPG in a header frame when a certain page is loaded in content frame? (Without reloading the entire header frame HTML.)

One step further... Could the script (on the content frame) check which graphic is currently being used in the header frame, and then execute the "swap" based on whether the correct graphic is already there or not?

Any help would be greatly appreciated. Thank you very much.

[Jona]

If your image is named, "bannerImg" and your right frame is named, "content" you can use this in the left frame:


parent.frames["content"].images["bannerImg"].src="new_banner.gif";


Jona

[msmith29063]

Thank you for your quick reply. Would you be able to elaborate on the whole script/syntax any, as far as how to check for what graphic is already there? Any help is appreciated. Thank you so much.

[Jona]

Let's say your right frame is named, "content," your left frame is named, "nav," your image is named, "bannerImg," and the starting image is banner01.gif. If this is true, we can use the following function to change the image every set amount of seconds--in this example we'll use ten.

Left (Nav) Frame (head section):

<script type="text/javascript">
<!--
var banAry = new Array("banner01.gif","banner02.gif","banner03.gif");
/*Change the above to the source image locations*/
var x=0; //set a variable to zero
function swapBanner(){
alert(parent.frames["content"].document.images["bannerImg"].src;
/*Alert the source of the image*/
parent.frames["content"].document.images["bannerImg"].src=banAry[x];
/*Chang e the source of the image to the next image in line*/
if(x==3){x=-1;}
/*if x is 3, make it negative 1 (it increments afterwards,, making it zero again, which means it will start with the first image in the banAry array*/
x++; //increment x
}
window.setTimeout("swapBanner()", 10000);
/*run the function every 10000 milliseconds, or 10 seconds*/
//-->
</script>


Jona

[msmith29063]

Thank you so much for your concise explanation. I'm sorry. Here's a better description of what I'm try to do.

* On initial site load, image1 is used in the header frame.
* The graphic stays the same as I browse the site in the content frame. Every page that loads into the content frame verifies that image1 is being used in the header frame.
* When I get to a certain page '123.asp' in the content frame, it sees that image1 is the current graphic in the header frame and changes it to image2 (to correspond with that pages content).
* After I leave that page, the next page changes the graphic in the header frame back to image1.

I hope this makes sense. Is there a better way to achieve the same results? Any help is greatly appreciated. Thank you so much!

[Jona]

Oh... In that case, just use this on whatever link you want:


onClick="parent.frames['bannerFrameName'].document.images['bannerImg'].src='banner2.gif';"


Jona

[msmith29063]

This is a continuation of a recent post I started...

Here's the skeleton for a script I'm trying to put together for checking the image (in a header frame called "header") that is being displayed and replacing it with another image based on the content (location) of the content frame (called "main"). Let me know if there is a better way to do this. Thanks for all your help!

function Banner() {

// Determine what banner graphic is currently being used
var src = parent.frames['header'].document.images['bannerimg'].src; // get entire URL
src = src.substr(src.lastIndexOf('/') + 1); // get just file name

// Determine what section we're currently in
var section = parent.frames['main'].document.location; // DEFINITELY NEED HELP HERE!!!

// Replace banner graphic, if applicable
if (section contains 'section1' && src != 'header_banner_section1.jpg') {
parent.frames['header'].document.images['bannerimg'].src='header_banner_section1.jpg';
} or {
if (section contains 'section2' && src != 'header_banner_section2.jpg') {
parent.frames['header'].document.images['bannerimg'].src='header_banner_section2.jpg';
} else {
parent.frames['header'].document.images['bannerimg'].src='header_banner_default.jpg';
}

}

[msmith29063]

I apologize for starting a new thread. It won't happen again...

Yes, it's psuedo-code right now.

var section = parent.frames['main'].document.location;

^ Here, I'm trying to get the complete URL for the content frame

if (section contains 'section1' && src != 'header_banner_section1.jpg') {

^ Here, I'm trying to see if the complete URL for the content frame contains the word (which is the folder name) "section1". If it does, AND the corresponding banner graphic ISN'T being used, replace it with the correct banner graphic.

I'm using this method so I don't have to place any specific scripting on the corresponding content pages. I'm trying to use one script for the complete site -- to run on EVERY content page.

If there is a better way to accomplish the same goal, please let me know. I hope the rest of the syntax is good. Thank you so much for your valuable time!

[msmith29063]

Here's the script I've ended up with:

function Banner() {

// Determine what banner graphic is currently being used
var src = parent.frames['header'].document.images['bannerimg'].src; // get entire URL
src = src.substr(src.lastIndexOf('/') + 1); // get just file name

// Determine what section we're currently in
var section = parent.frames['main'].document.location; // get entire URL

// Replace banner graphic, if applicable
if (section.indexOf('section1') > -1 && src != 'header_banner_section1.jpg') {
parent.frames['header'].document.images['bannerimg'].src='header_banner_section1.jpg';
} or {
if (section.indexOf('section2') > -1 && src != 'header_banner_section2.jpg') {
parent.frames['header'].document.images['bannerimg'].src='header_banner_section2.jpg';
} else {
parent.frames['header'].document.images['bannerimg'].src='header_banner_default.jpg';
}

}

Note: that 'section1' and 'section2' are folder names.

1. Does the line that gets the entire URL for the current page (in the 'main' frame) correct?

2. Do the lines that check to see if 'section1' or 'section2' (folder names) are in the URL correct?

I've tested on Mac browsers so far, and nothing happens. Any ideas? Thank you so much for your help!

[msmith29063]

Or would it be easier at this point to just run the line on every content page that changes the graphic to the correct one?

parent.frames['header'].document.images['bannerimg'].src='header_banner_section1.jpg';

I was trying to do something a little sexier, where it would actually look to see what's there first before it changes the graphic. I didn't want to run the script line (above) on every page unless it needed to.

Would running this one-line script on every page slow the site down?

[msmith29063]

You know, nothing is happening...

FYI: Here's the overall structure:

* The javascript is in a file called "banner.js" and is referenced in the HTML (between the <head></head>) of the content frame page by:

<script type="text/javascript" src="../banner.js"></script>

* It's then executed in the body tag:

<body onload="javascript:Banner();{if(parent.frames[0]&&parent.frames['subnav'].Go)parent.frames['subnav'].Go()}" bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">

The script we're talking about is function "Banner()". The rest of this action deals with another javascript for a pull down menu in the "subnav" frame.

Am I missing something? Is the syntax ok?

[msmith29063]

I tested on my PC and got these two errors:

Line: 16
Character: 7
Error: Expected ';'
Code: 0
.../main.asp

Line: 27
Character: 1
Object Expected
Code: 0
.../main.asp

I don't understand. If taken literally, the first error refers to a line of another javascript in the header that displays the date later in the file. The second error actually is on the <body onLoad...> action.

Attached is the first portion of the main.asp file. This is the first content frame the user encounters on the site. Thank you so much for your help!

[msmith29063]

Ok. Any ideas on how to start troubleshooting/narrowing down the error(s)? You've been awesome!

[msmith29063]

I've contacted you at your website, Dave, regarding getting a price quote. Thank you for your help up to this point!