Help - Search - Members - Calendar
Full Version: Iframe
Zymic Webmaster Forums > Web Design & Development > General Web Design Discussion
GamesFan
I want to set it on my website to where when a link is chosen on the main navigation is does not load an entire new page but instead just the frame.
Can someone help me get this started?
Jetteh22
Yes. It's actually fairly easy once you get the hang of it.
First you want to create your iframe...

CODE
<iframe src="THE URL OF WHAT DEFAULT PAGE YOU WANT THERE" width="WIDTH" height="HEIGHT" scrolling="auto" name="main"></iframe>


There are many different ways you can make an iframe but that is basically the easiest, IMO.
Example:

CODE
<iframe src="http://www.yoursite.com/index2.html" width="500" height="500" scrolling="auto" name="main"></iframe>


That creates the actual iframe - PUt that where you want your iframe to go.

Now, as for the links.. The default basic link of most people is

<a href="http://www.thissite.com/thispage.html"> text here </a>

But.. You want to add the SRC tag to that so that it tells the link WHERE to put the page.

<a href="http://www.yoursite.com/thispage.html" src="main"> text here </a>

You want the SRC to = whatever the name of the iframe was.. That will make the page load in the iframe.

And there u go.



P.S - By the way.. If you ever want to load a page in a new window, you just give it an SRC of something that you don't have a frame of.. But most people, including myself just give it "_BLANK"..

<a href="http://thissite.com/thispage.html" src="_BLANK"> text here </a> That will open a page in a new window.
GamesFan
Very much of help. Thanks.
I must ask.. it looks like there's a simple border around the iframe when I look at it from the index page.
Know why that is?
Andrew
Hey try adding frameborder="0" inside the iframe tag.
GamesFan
QUOTE(Trippin7464 @ Apr 5 2008, 07:33 AM) *
Hey try adding frameborder="0" inside the iframe tag.


Worked perfectly.
Thanks man.
I'm a bit... wacko.gif when it comes to html.
Andrew
Don't worry about it, I was the same when I first started learning html, now i'm trying to learn php and I feel the same way. You just have to keep learning. You might want to check out an html editor that brings up a list of variables for each tag, html-kit does this. You type <iframe then when you hit the space bar, about 1 second later a list pops up with all the different things you can do to that tag. like src, or frameborder
It helps alot when you can't remember or don't know how to do something.
GamesFan
I cannot get the pages to load up inside the iframe and I know it's because I am messing up with my links.

the link to the page goes mywebsite.com/index.htm

I have a link called "About" which describes the purpose of the site. THis is what it looks like:

CODE
<td bgcolor="#5b5b5b" onMouseOver="this.className='over'" onMouseOut="this.className='out'"><font size="1"><img src="images/bulletarrow.gif" width="11" height="5"><a href="mywebsite.com/about.html" src="main">About</a></font></td>
  </tr>
tomlkier
try changing "mywebsite.com/about.html" to "http://mywebsite.com/about.html"
Paradoks
why would you even do
CODE
<a href="http://mysite.com/page.html" src="iframename">page</a>

?????!!!!
Just simple do
CODE
<a href="page.html" src="iframename>Page</a>
Jetteh22
I prefer to use the entire URL when I do my links for some reason :S
Paradoks
waste of, .000002-.00008 bytes depending on how big the URL is :-) Saved space is happy space!
GamesFan
<a href="page.html" src="iframename">Page</a>

Okay...
I cannot figure out what goes in the bold part of the link above and I know that's my problem.
tomlkier
example iframe code:

<iframe src="http://www.yoursite.com/index2.html" width="500" height="500" scrolling="auto" name="name"></iframe>

example link code:

<a href="page.html" src="name">Page</a>


bold word/phrase needs to be the same for both
GamesFan
Okay...
lets go now and talk like we're communicating with a three year old.

so the bold part in each of those links have to be the same, right?
My thing is.. I still don't know what to put in there as the iframe name.
My small brain is not allowing me to comprehend that.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2012 Invision Power Services, Inc.