supa
04-12-2008, 12:54 AM
With thanks to patti who without her this forum wouldn't be the same ;)
What is an Iframe -
IFrame is an HTML element which makes it possible to embed another HTML document (or picture) inside the main document
look here for a sample of an Iframe :
http://allwebco-templates.com/support/S_script_IFrame.htm
How to do it-
draw a simple box into your page.
press on your box and click on the custom script field located in the inspector properties (press ctrl+k to show) on the right.
when you open the custom script window you can see several options on top. it should be checked on the Objects events, if you choose different option it will be put inside the page itself without connection to nothing and will be set at the first place of the page which is the top left and you don't really want that to happen...
put this code inside: <iframe name="body1" src="pics\example1.jpg" width="250" height="300" style="border:2px inset #000000" >
</iframe>
What is this code all about ?
there are 5 elements within which tells the Iframe what to show and how.
Name= call the iframe a name, it can be Richard, Ron, Anna, or any other name you feel like calling it, in our case: body1 (note- this name will be used later on for linking)
SRC= this is the source of the Iframe, the first page or image that will be shown upon previewing the page. you should write an address of an HTML file or a picture file like above, but you must apply the address right.
writing "pics\example1.jpg" will let the iframe to search for the example1.jpg file inside a "pics" folder. as there is no D:/ and no other full address it will search the folder in its "Root" folder of the previewing html page.
for example:
When you preview your page the WE software will first produce the files to preview (HTML files and your date and images) into your TEMP folder of WE.
so if you want to see something inside you BOX (iframe) you need to create a folder inside TEMP folder and call it: "pics" and then put a picture named :
example1.jpg
----------------
But you must understand the concept of how to address the file and where to put the file. so when you finish and export your site to the hosting space you will need to manually create that folder and put these right files in the right place on net.
Width= simply set the width of the iframe (changing the box's width won't control its size for now it is under the control of the script)
Height=simply set the Height of the iframe (changing the box's Height won't control its size for now it is under the control of the script)
Style= set styling like border of the iframe.
2px : thickness (0px will omit the border)
inset : kind of border, it can be chosen from this list :
dotted
dashed
solid
double
groove
ridge
inset
outset
and #000000": set border color by number. look here: http://www.gotomy.com/color.html for colors code numbers.
Now put a thumbnail picture in your page (Tip- hold the ctrl key while dragging a picture into WE to make it a thumbnail)
press on the small thumbnail picture inside WE, go to its link value (inspector: Ctrl+k) and choose to link it by custom script type.
insert this code: href="pics/example2.jpg" target="body1"
I assume by here that you already have a pics folder in the root folder of your previewing page and that you have 2 picture files inside: example1.jpg and example2.jpg.
by inserting this code as a link we simply make the page to open the example2.jpg image inside our box friend "body1" instead of just opening in a new window...
(note- if you want to open an html within the iframe, simply change the Href= to address an already made html file).
Thats it, preview your page.
if you followed and still it doesn't work... check your addressing of the files and make sure they're there.
Feel free to correct me here on any goof ups... :cool:
or just to wish me a "happy 300 messages day"...
Supa
What is an Iframe -
IFrame is an HTML element which makes it possible to embed another HTML document (or picture) inside the main document
look here for a sample of an Iframe :
http://allwebco-templates.com/support/S_script_IFrame.htm
How to do it-
draw a simple box into your page.
press on your box and click on the custom script field located in the inspector properties (press ctrl+k to show) on the right.
when you open the custom script window you can see several options on top. it should be checked on the Objects events, if you choose different option it will be put inside the page itself without connection to nothing and will be set at the first place of the page which is the top left and you don't really want that to happen...
put this code inside: <iframe name="body1" src="pics\example1.jpg" width="250" height="300" style="border:2px inset #000000" >
</iframe>
What is this code all about ?
there are 5 elements within which tells the Iframe what to show and how.
Name= call the iframe a name, it can be Richard, Ron, Anna, or any other name you feel like calling it, in our case: body1 (note- this name will be used later on for linking)
SRC= this is the source of the Iframe, the first page or image that will be shown upon previewing the page. you should write an address of an HTML file or a picture file like above, but you must apply the address right.
writing "pics\example1.jpg" will let the iframe to search for the example1.jpg file inside a "pics" folder. as there is no D:/ and no other full address it will search the folder in its "Root" folder of the previewing html page.
for example:
When you preview your page the WE software will first produce the files to preview (HTML files and your date and images) into your TEMP folder of WE.
so if you want to see something inside you BOX (iframe) you need to create a folder inside TEMP folder and call it: "pics" and then put a picture named :
example1.jpg
----------------
But you must understand the concept of how to address the file and where to put the file. so when you finish and export your site to the hosting space you will need to manually create that folder and put these right files in the right place on net.
Width= simply set the width of the iframe (changing the box's width won't control its size for now it is under the control of the script)
Height=simply set the Height of the iframe (changing the box's Height won't control its size for now it is under the control of the script)
Style= set styling like border of the iframe.
2px : thickness (0px will omit the border)
inset : kind of border, it can be chosen from this list :
dotted
dashed
solid
double
groove
ridge
inset
outset
and #000000": set border color by number. look here: http://www.gotomy.com/color.html for colors code numbers.
Now put a thumbnail picture in your page (Tip- hold the ctrl key while dragging a picture into WE to make it a thumbnail)
press on the small thumbnail picture inside WE, go to its link value (inspector: Ctrl+k) and choose to link it by custom script type.
insert this code: href="pics/example2.jpg" target="body1"
I assume by here that you already have a pics folder in the root folder of your previewing page and that you have 2 picture files inside: example1.jpg and example2.jpg.
by inserting this code as a link we simply make the page to open the example2.jpg image inside our box friend "body1" instead of just opening in a new window...
(note- if you want to open an html within the iframe, simply change the Href= to address an already made html file).
Thats it, preview your page.
if you followed and still it doesn't work... check your addressing of the files and make sure they're there.
Feel free to correct me here on any goof ups... :cool:
or just to wish me a "happy 300 messages day"...
Supa