Need Help with images changing depending on another Frame?

[23kStudios]

Hey all,
Got a big, kind of tough question about Javascript.

Here's the deal i have the main site for 23k studios.
Check out the older version here...

http://www.23k.com/portfolio.html

Now i have this split up into 2 frames now where the navigational images (grey ones) at the bottom & back-next buttons are one frame, and the top is another frame, with tons of pages.

Right now i have the Back & Next buttons working and cycling through all the images, but you know what i need now that i just CANT figure out?

****
I want the image to change into the colored one just like it does on this non frame site, even when a person CLICKS on the Image, and when the Back/Next buttons are click as well.

I know it has something to do with changing according to the URL of the top frame, but just not sure how to put it all together with all the javascript i have now =/

Someone PLEASE help me here? I've been stuck on this for an entire week!

Sincerely,
Mark!

 

[23kStudios]

Or basically,
what could be easier is...

if i had an ONLOAD javascript command that changed a certain picture in the other frame automatically just because its opened.

Then that would be taken care of but wouldn't it change back to normal if i mouse overed it?

ughh!! frustrating.

 

[MOrac]

Personally, I'd go for a primarily CSS-based fix, as it's much easier. The basic layout is to have the background image of the <a> element as the coloured image and have the <a> element have the grey image as its background image. Use a CSS definition for :hover on those elements to have no background image, which would correctly display the coloured image underneath the <a> element on mouseover (and without any javascript intervention).

Then your problem with the onLoad event becomes simple; you simply set the correct <a> element to have a CSS display value of none. This removes the unwanted navigation, hover-event, and shows the coloured picture, all in one.

 

[23kStudios]

But what i'm thinking the problem is even with the onload in the new opening top frame, the lower frame doesn't automatically refresh so how would it change.

I'm not that familiar with CSS i didn't know pictures could be in hover states as well?

How do i set images into states like that with CSS anyways.
Like a normal state then a hover state.

=(

 

[MOrac]

This is the kind of thing you'd need in the navigation frame - I used your site reference as a source for this:

...

<script type="text/javascript" language="JavaScript">
function set_portfolio(t) {
for (var i = 1; i <= 11; i += 1) {
  if (document.getElementById && document.getElementById('portfolio' + i)) {
    document.getElementById('portfolio' + i).style.display = (i == t) ? 'none' : 'inline';
  } else if (document.all && document.all['portfolio' + i]) {
    document.all['portfolio' + i].style.display = (i == t) ? 'none' : 'inline';
  }
}
</script>

...

<style>
  #portfolio td, #portfolio1, #portfolio2, #portfolio3, #portfolio4, #portfolio5, #portfolio6, #portfolio7, #portfolio8, #portfolio9, #portfolio10, #portfolio11 {
    background-repeat: no-repeat;
    background-position: left top;
    font-size: 1px;
    padding-bottom: 43px;
  }
  #portfolio {
    background-color: #ffffff;
  }
  #portfolio1 {
    background-image: url(images/ttmx3.jpg);
    padding-left: 46px;
  }
  #portfolio2 {
    background-image: url(images/ttoptier3.jpg);
    padding-left: 47px;
  }
  #portfolio3 {
    background-image: url(images/ttowers3.jpg);
    padding-left: 47px;
  }
  #portfolio4 {
    background-image: url(images/tconcord3.jpg);
    padding-left: 47px;
  }
  #portfolio5 {
    background-image: url(images/tgrandprix3.jpg);
    padding-left: 47px;
  }
  #portfolio6 {
    background-image: url(images/tnorvasc3.jpg);
    padding-left: 47px;
  }
  #portfolio7 {
    background-image: url(images/tnordicgear3.jpg);
    padding-left: 47px;
  }
  #portfolio8 {
    background-image: url(images/toscal3.jpg);
    padding-left: 47px;
  }
  #portfolio9 {
    background-image: url(images/tbaumcard3.jpg);
    padding-left: 47px;
  }
  #portfolio10 {
    background-image: url(images/tsapgolf3.jpg);
    padding-left: 47px;
  }
  #portfolio11 {
    background-image: url(images/trisk3.jpg);
    padding-left: 48px;
  }
  #portfolio1:hover, #portfolio2:hover, #portfolio3:hover, #portfolio4:hover, #portfolio5:hover, #portfolio6:hover, #portfolio7:hover, #portfolio8:hover, #portfolio9:hover, #portfolio10:hover, #portfolio11:hover {
    background-image: none;
  }
</style>

...

<table id="portfolio" height="44" border="0" cellspacing="0" cellpadding="0">
  <tr align="left" valign="top">
    <td style="background-image: url(images/ttmx.jpg)"><a id="portfolio1" href="portfolio.html"></a></td>
    <td style="background-image: url(images/ttoptier.jpg)"><a id="portfolio2" href="portfolio2.html"></a></td>
    <td style="background-image: url(images/ttowers.jpg)"><a id="portfolio3" href="portfolio3.html"></a></td>
    <td style="background-image: url(images/tconcord.jpg)"><a id="portfolio4" href="portfolio4.html"></a></td>
    <td style="background-image: url(images/tgrandprix.jpg)"><a id="portfolio5" href="portfolio5.html"></a></td>
    <td style="background-image: url(images/tnorvasc.jpg)"><a id="portfolio6" href="portfolio6.html"></a></td>
    <td style="background-image: url(images/tnordicgear.jpg)"><a id="portfolio7" href="portfolio7.html"></a></td>
    <td style="background-image: url(images/toscal.jpg)"><a id="portfolio8" href="portfolio8.html"></a></td>
    <td style="background-image: url(images/tbaumcard.jpg)"><a id="portfolio9" href="portfolio9.html"></a></td>
    <td style="background-image: url(images/tsapgolf.jpg)"><a id="portfolio10" href="portfolio10.html"></a></td>
    <td style="background-image: url(images/trisk.jpg)"><a id="portfolio11" href="portfolio11.html"></a></td>
  </tr>
</table>

...

Your main pages would need to run an onload event which called the set_portfolio function in the navigation frame to set the correct picture - for instance, a page in the portfolio2 collection would use:

<body onload="top.[i]<navigation-frame-name>[/i].set_portfolio(2);">