WHEW! You are seriously frustrated!
Take a breath and relax a moment.
You may have found the right place to fix your issue!
I have MANY MANY MANY iframe samples on samisite.
One of them may help you, if not, we can try to create a sample specifically for you if necessary if my verbal instructions don't do enough.
You are not alone! Lots of folks have difficulty with implementing iframes!
Some folks have a difficult time getting the individual pieces to work, even when they understand the concept.
Some folks can't understand the concept and try to implement anyway and that just makes it worse.
The good news is that once you get it....you get it!
Iframes have certain rules you must follow.
It's like a light bulb goes off and from that point on, you GET it!
Have gotten many folks to using iframes that thought they couldn't!
I can not promise to get you doing what you want but I will certainly TRY MY HARDEST.
Let me first make sure that I understand WHAT
YOU want to do.
Lots of things you can do with iframes and I need to understand what YOU want to do with them to best assist you.
Sounds like you want to change the content of an iframe using thumbnail links. Is that correct?
Please look at this sample. Is this what you had in mind?
(There are no instructions on that page, I just want you to tell me that's what you need to do or not)
My main iframe tutorial page is here:
http://www.samisite.com/test-csb2nf/id43.htmGenerally, there are 3 parts to an iframe project:
1) The main page that holds the iframe code usually has the links. The iframe is simply a HOLE (or WINDOW) cut into your webpage so you can see some other page through it.
This is a hard concept to understand! After all, how can a flat page on the computer have a hole in it?
- I can show you how it is done by using 1 sheet of paper and 2 other items (newspaper, magazine, ad, anything printed).
- Take the plain piece of paper and cut a square hole in it, anywhere in it.
- Then put the first other item with text or images on it behind the sheet of paper.
- You will see the main sheet of paper surrounding the image or text that shows up through that hole/window in your sheet of paper! Just like your web page with a hole cut into it to see the other content.
- Now swap the item in back with another piece of paper/book/magazine. The main paper stays the same, but the e "content" of the hole/window changes!
Exactly like an iframe on your computer screen!
2) LINKS are used to change the contents of the iframe by using a target statement. Your links will use the target="....." statement to point your link to the iframe. without that statement, your image link will just act like a normal link and open in the same page or new page! If you have 2 iframes on the same page, they need unique names like: iframe1, iframe2, iframe3, etc. Then each of your links would need to say WHICH iframe you want to change. All the code samples below are for just ONE iframe named IFRAME1
If you name your iframe
IFRAME1 then your links would have the target:
target="IFRAME1"SIMPLE TEXT LINK HTML CODE - Relative link:
<a href="id43.htm" target="IFRAME1">Example 1: RELATIVE </a>
This is the type that most sites tell you to use. And you might be able to use them in your website project too.
This type points directly to a file (webpage, photo, text, etc) that is stored
in the same directory folder as your web page with the iframe.
- If you store your images with the iframe web page, this WILL work for you.
- If you store your images in a different folder, then you need to modify this to point to the right folder OR use Absolute link instead.
SIMPLE TEXT LINK HTML CODE - Absolute link:
<a href="http://www.samisite.com/test-csb2nf/id43.htm" target="IFRAME1">Example 2: ABSOLUTE</a>
If you store your images in a different folder than the web page, you can use an absolute link style. This means that you are pointing only to one place, one address specifically.
SIMPLE TEXT LINK HTML CODE - Absolute link with a floating tooltip:
<A href="http://www.google.com" target="IFRAME1" title="Google: the best search engine!">Example 3: Google</A>
This sample shows an absolute link WITH the extra little title that allows your visitor to hover over the link to see a little tool tip.
IMAGE LINK from thumbnail to larger USING CODE
<A HREF="http://www.yourwebsite.com/imagefolder/myimage.jpg/" target="IFRAME1" ><IMG SRC="http://www.yourwebsite.com/imagefolder/myimagethumbnail.jpg/" border=0 width="80 height="80">/A>
Things you will have to change:
the href="" is the web page or image you want to show in your iframe!
the myimage.jpg is the fullsize image name (or use a web page name instead)
the SRC="" myimagethumbnail.jpg is the thumbnail (small) image name
border = 0 means you do not want a border around your image, change to 1, 2, 3, etc to get different size border
width and height must be changed to fit YOUR thumbnail image.
3) CONTENT for your iframe.
These can be images, web pages, text files, many things.
You can even put images ON web pages and point your links to the web pages so they blend with the main web page! If you have 10 links, you need at least 10 "content" pieces": 10 web pages, or 10 images, or 5/5, etc... your choice.
OK.... After reading this...tell me what does not make sense.
What do I need to clarify for you?
Would love to see what you do with the iframe.