homepage Welcome to WebmasterWorld Guest from 54.227.34.0
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Frames and navigation image swaps
Looking for javascript cut'n paste or examples
Kieron

10+ Year Member



 
Msg#: 272 posted 1:39 pm on Jan 29, 2003 (gmt 0)

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.

Whats 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 Im pretty JS illiterate, but didnt find what I needed. Does anyone know where I can find something similar to pull apart?
Thanks in advance.

 

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 272 posted 1:51 pm on Jan 29, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 272 posted 7:18 am on Jan 30, 2003 (gmt 0)

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

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 272 posted 9:08 am on Jan 30, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 272 posted 12:09 pm on Jan 30, 2003 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 272 posted 9:56 pm on Jan 30, 2003 (gmt 0)

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

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 272 posted 10:09 pm on Jan 30, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 272 posted 11:12 pm on Jan 30, 2003 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved