Frames and navigation image swaps

Looking for javascript cut'n paste or examples

[Kieron]

Hi all.
I have a web consisting of 2 frames -- a top, navigation frame (top.htm) and a bottom content frame (main.htm). The top navigation frame has 7 navigation images -- each of which calls up its appropriate page (Pg1-7) in the bottom content frame.

I want each navigation button to have a mouseover effect (image_on) and, when clicked, image_on should stay on while any previously clicked navigation images swap to image_off. Of course, clicking on the image should call up the appropriate page in the content frame as well.

What’s the best (most elegant) way to do this? Javascript? I spent 2 days trying to find something on the web (to cut ‘n paste) as I’m pretty JS illiterate, but didn’t find what I needed. Does anyone know where I can find something similar to pull apart?
Thanks in advance.

[tedster]

If you've gotta do frames, this is a very thoughtful approach -- it fixes one of the basic usability elements that most frame sites break: showing a location cue.

Here's a tutorial I found on the topic -- seems like the right approach to me. And there's enough explanation for you to customize the script to your exact situation.

[xs4all.nl...]

[Kieron]

Thanks Tedster. I'll work my way through that example.
(and yes, I "have to" use frames. I'm merely updating an existing framed site and, as it the owner doesn't want it to be picked up by SEngs, I'm happy to keep it).

Anyone else know where I can find a framed web that uses image swaps similar to what I described above?

[DrDoc]

Yes, Kieron .. I do that a lot when I create framed pages. Did you find what you needed, or do you want additional help? If so, let me know and I'll post a useful and well commented answer.

[Kieron]

Thanks DrDoc
The example Tedster posted is pretty much what I'm looking for but the more examples I have, the easier it will be to get the gist of it. Any additional help or links would be very much appreciated.
Thanks.

[John_Caius]

If you did want it picked up by the SEs, all you'd need to do would be to put a sitemap of the content pages in the NOFRAMES content of the frameset. It's very simple. You do get orphan pages that way but there are script ways around that problem or you can just put a link to your frameset at the bottom of each content page.

[DrDoc]

This is how to do it using JavaScript:

<script type="text/javascript">
// Check if it's a DOM compliant browser
var MZ = document.getElementById?true:false;
// Maybe it's an old IE?
var IE = document.all?true:false;
// Or maybe an old NN?
var NN = document.layers?true:false;

var navimg = 0;

var defimg = new Array(3);
var ovrimg = new Array(3);
for(i=0; i<3; i++) {
defimg[i] = new Image;
// Default image = "images/link1.gif"
defimg[i].src = "images/link" + (i+1) + ".gif";
ovrimg[i] = new Image;
// MouseOver image = "images/link1_.gif"
ovrimg[i].src = "images/link" + (i+1) + "_.gif";
}

function over(which) {
// No image switch if we're already on that page
if(navimg!= which) {
if(MZ) {
document.getElementById('img' + which).src = ovrimg[which].src;
}
else if(IE) {
document.all['img' + which].src = ovrimg[which].src;
}
else if (NN) {
document.layers['img' + which].src = ovrimg[which].src;
}}}

function out(which) {
// No image switch if we're already on that page
if(navimg!= which) {
if(MZ) {
document.getElementById('img' + which).src = defimg[which].src;
}
else if(IE) {
document.all['img' + which].src = defimg[which].src;
}
else if (NN) {
document.layers['img' + which].src = defimg[which].src;
}}}

function nav(which) {
navimg = which;
}
</script>

<a href="page1.html" onmouseover="over(1)" onmouseout="out(1)" onclick="nav(1)" target="otherframe"><img id="img1" src="images/link1.gif" width="50" height="20" border="0" alt="" /></a><br />
<a href="page2.html" onmouseover="over(2)" onmouseout="out(2)" onclick="nav(2)" target="otherframe"><img id="img2" src="images/link2.gif" width="50" height="20" border="0" alt="" /></a><br />
<a href="page3.html" onmouseover="over(3)" onmouseout="out(3)" onclick="nav(3)" target="otherframe"><img id="img3" src="images/link3.gif" width="50" height="20" border="0" alt="" /></a><br />

---

And here's how to do it using CSS:

<style type="text/css">
a.default {
padding: 2px 10px 3px 10px;
font-size: 0.8em;
border: outset 2px #5aa0b8;
background: #004466;
color: #cccccc;
text-decoration: none;
height: 19px;
vertical-align: bottom;
}
a.default:active, a.default:focus, a.default:hover {
background: #004466;
border: inset 2px #5aa0b8;
vertical-align: middle;
color: #5aa0b8;
}
a.clicked {
padding: 2px 10px 3px 10px;
font-size: 0.8em;
border: inset 2px #5aa0b8;
background: #004466;
color: #5aa0b8;
text-decoration: none;
height: 19px;
vertical-align: middle;
}
</style>

<a href="page1.html" class="default" target="otherframe" onclick="document.getElementByTagName('a').className='default';this.className='clicked';">Link text</a><br />
<a href="page2.html" class="default" target="otherframe" onclick="document.getElementByTagName('a').className='default';this.className='clicked';">Link text</a><br />
<a href="page3.html" class="default" target="otherframe" onclick="document.getElementByTagName('a').className='default';this.className='clicked';">Link text</a><br />

Personally I prefer the CSS way ;)
• Page loads faster
• Easy to change the link text
• Buttons are dynamic (they automatically resize to fit the text)

If you don't want them to be dynamic you can always specify the

width

, and set

text-align

to

center

.

[Kieron]

Thanks chaps,
DrDoc, that looks great. That will be (almost) fun to play around with. I am particularly interested to see how the css works -- I'm much more familiar with CSS.

I really appreciate it DD particularly since I spent days trying to piece together bits and pieces from all over.. to no avail.

John, thanks for the tip re ranking frames. I have put a little js in each page to stop it from becoming an orphan just in case it gets picked up. (its so sad when that happens :()

We are not excluding it from the SEngs completely, but are not promoting it either; the people who need to know it's there, do... and if others stumble upon it, so be it.)

Thanks all, much obliged.