WebMonkey Beta 2.0: The Web Developer's Resource

Help|
Rss feeds
- Rss feeds
- Subscribe to:
- Tutorials
- Reference
- Code library
- All articles
- Monkey Bites Blog

Member Sign In

Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.

It's fast and free.

Join Now

Webmonkey is a property of Wired Digital.

processing...

Join Webmonkey

E-mail address:

Username:

Password:

Confirm password:

Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.

Yes No

Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.

Yes No

I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.

Join Now

Webmonkey is a property of Wired Digital.

processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

Webmonkey is a property of Wired Digital.

processing...

Welcome to Webmonkey

A private profile page has been created for you.

As a member of Webmonkey, you can now:

edit articles
add to the code library
design and write a tutorial
comment on any Webmonkey article

Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.

If you cannot find it in your in-box, please check your bulk or junk folders.

Webmonkey is a property of Wired Digital.

Put Links in Framesets

/skill level/

/viewed/

0 Times

Today, we're talking about how to specify into which frame you'd like your linked documents to load. If you're a little fuzzy on the concept of frames, you should go back and read the first piece in this series, where we explain how to Create Simple HTML Frames in the context of a Midwestern picnic. Go ahead, we'll wait....

This tutorial, originally submitted by Webmonkey contributor Jill Atkinson, is a wiki. It recommends depricated methods, but it's well-loved. If you have extra advice, please log in and add it.

Now, the most powerful feature of frames is that certain regions on a page can remain stationary -- acting as a control panel or navigation bar -- while others reload. So I can follow a link in one section and have a new page appear in a different section. Pretty cool.

Let's return to our picnic plate to illustrate.

So we have three frames, which we named "pastasalad," "chicken," and "jellocubes." Each of these frames pulls in a different HTML document - pastasalad.html, chicken.html, and jellocubes.html, respectively. The HTML looks like this:

      <html>
      <frameset cols="66%,34%">
      <frame src="chicken.html" name="chicken">
      <frameset rows="100,*">
      <frame src="pastasalad.html" name="pastasalad">
      <frame src="jellocubes.html" name="jellocubes">
      </frameset> </frameset>
      </webmonkey/html>

Up until now, it seemed unnecessary, if not downright silly, to name the frames (Kind of like naming a cat. Why bother? It's not going to answer to it or anything). But here's where it all starts to make sense. Because each of our frames has been named, we can create links in one region that will load a document into another (which we will specify by name. Is it starting to come clear?).

Now this will come in handy for my Dad. See, Dad doesn't believe in boundaries between food. He likes to mush things together, dipping his chicken into the pasta salad, his corn into the barbecue sauce, and so forth.

So, just for Dad, we're going to work some dipping functions into our HTML document. Let's say we want to add a link to the chicken section, which will dip some chicken into the pasta salad section.

To do this, we'd create a link within chicken.html that looks like this:

 <a href="chicken.html" target="pastasalad">Dip!</a>

This will load the document "chicken.html" into the frame named "pastasalad," creating a page that looks like this.

Now, of course, you can link to any file you want; it doesn't have to be one of the ones already in use on the page. So, for example, let's say you've had just about enough of the gnarly pasta salad, when who should come wandering over but Jack, the neighbor's Newfoundland (or maybe he's a Chesapeake Bay) retriever ... well, he's some kind of location dog. Anyway, so Jack comes running over, and Jack fetches rocks and climbs ladders - he's not what you'd call a smart dog - which makes him a perfect candidate for my mother's pasta salad.

So instead of using the link in chicken.html to dip my chicken into the pasta salad, I'll change the link to bring in a new page, jack.html.

The new link within chicken.html will look like this:

 <a href="jack.html" target="pastasalad">Hey, Jack!</a>

So now Jack will do away with the troublesome pasta salad:

Be careful, though. If you don't specify a target frame, the new document will automatically load into the frame that contains the link. And Jack would get your chicken, instead of the salad.

But what happens if you want a to load your document into a page without any frames? No problem.

Loading a document into a brand new page - one that doesn't have any frames on it at all - is as easy as grabbing a new little dessert plate when you're done with the main course. Just change the link, so the target="_top". This will load a new page over the "top" of your current frameset.

So your link would look like this:

 <a href="chocolatecake.html" target="_top">

And you'd get a brand new page that looks something like this:

If you want to get really fancy, you can even load documents into two different frames at once. But I'll leave it to Luke to Change Two Frames at Once Using JavaScript.

Retrieved from "http://rprod.webmonkey.com/tutorial/Put_Links_in_Framesets"