Can I do this with FrontPage 2003?

[Guest]

One often sees pages on sites where the user can cause information in only a
portion of a page to change, without reloading the entire page. A sort of a
page withing a page. A table within the page, for example, where a visitor
can click on different tabs in that table to cause the information within
that table to change, but without loading a whole new page. (Is this clear?)
How is this magic done? Can I create it in FrontPage? If not with FrontPage,
can I do it with Expression Web?

 

[Trevor L.]

One often sees pages on sites where the user can cause information in
only a portion of a page to change, without reloading the entire
page. A sort of a page withing a page. A table within the page, for
example, where a visitor can click on different tabs in that table to
cause the information within that table to change, but without
loading a whole new page. (Is this clear?) How is this magic done?
Can I create it in FrontPage? If not with FrontPage, can I do it with
Expression Web?

It probably uses JavaScript to load different text and other info. into the
table.

Or it could be an iframe, in which case the JS loads a new *page* into the
"table". (The table may not be a table as such, but just the iframe.)

Yes, you can do it in FrontPage, but you would have to use the Code or HTML
view to write a bit of HTML to call the JS. The JS also has to be coded (or
pasted from another source)

An example of an iframe is on my site http://tandcl.homemail.com.au

Click on the button:
"Open/Close News of this Site"
This opens an iframe and loads news.html into it (the viewer doesn't see
this, or even need to know that it occurs, s/he just sees the frame with its
contents)

In my case the iframe is hidden until the user clicks, but it doesn't have
to be.

Do you want some code to do this ?
--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
----------------------------------------

 

[Guest]

Thank you, Trevor L. Here's an example of precisely the kind of thing I would
like to do:

http://www.sundancecatalog.com/shop...?itemID=7066&itemType=PRODUCT&iProductID=7066

The "product information", "May we also recommend", "Product Story", "Care
Information" tabs. This seems like a remarkably elegant and user-friendly way
to provide a visitor with whatever information they need or find relevant.
But am I correct in guessing that I will need to become a real whiz with Java
to do this?

One often sees pages on sites where the user can cause information in
only a portion of a page to change, without reloading the entire
page. A sort of a page withing a page. A table within the page, for
example, where a visitor can click on different tabs in that table to
cause the information within that table to change, but without
loading a whole new page. (Is this clear?) How is this magic done?
Can I create it in FrontPage? If not with FrontPage, can I do it with
Expression Web?

It probably uses JavaScript to load different text and other info. into the
table.

Or it could be an iframe, in which case the JS loads a new *page* into the
"table". (The table may not be a table as such, but just the iframe.)

Yes, you can do it in FrontPage, but you would have to use the Code or HTML
view to write a bit of HTML to call the JS. The JS also has to be coded (or
pasted from another source)

An example of an iframe is on my site http://tandcl.homemail.com.au

Click on the button:
"Open/Close News of this Site"
This opens an iframe and loads news.html into it (the viewer doesn't see
this, or even need to know that it occurs, s/he just sees the frame with its
contents)

In my case the iframe is hidden until the user clicks, but it doesn't have
to be.

Do you want some code to do this ?
--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/

 

[Trevor L.]

Thank you, Trevor L. Here's an example of precisely the kind of thing
I would like to do:

http://www.sundancecatalog.com/shop...?itemID=7066&itemType=PRODUCT&iProductID=7066

The "product information", "May we also recommend", "Product Story",
"Care Information" tabs. This seems like a remarkably elegant and
user-friendly way to provide a visitor with whatever information they
need or find relevant. But am I correct in guessing that I will need
to become a real whiz with Java to do this?

Thanks for the reference

From what I can see that it uses JavaScript to load an image into a table
cell
e.g .
<td onclick="sT(1)" style="cursorointer"><img id="tab1Img"
src="/images/us/local/page_specific/detail/pdttab1_btn_on.gif"
border=0></td>
<td onclick="sT(2)" style="cursorointer"><img id="tab2Img"
src="/images/us/local/page_specific/detail/pdttab2_btn_off.gif"
border=0></td>

When onclick= is executed, it loads a different image into the image tag
(the Tab itself). I had difficulty finding where it changes the contents of
the cell containing the images. But that's the principle behind it.

If you only want a different image or text, it would not be too diificult to
write the JavaScript.

But yes, you would have to learn some JavaScript (NOT java)

If you can give me a simple example of your page and what you want to change
I may be able to find the time to write or even find a simple script to swap
the image (or text) when a tab is clicked. (As I am retired, I usually have
some time, if I'm not browsing the newgroups or doing other "interesting"
things like shopping !)

--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
----------------------------------------

 

[Trevor L.]

If you can give me a simple example of your page and what you want to
change I may be able to find the time to write or even find a simple
script to swap the image (or text) when a tab is clicked.

Here is some simple HTML code which loads one picture when it starts and
then allows you to change to another by clicking one of the underlined texts

With code as it is written, the images have to be in the same folder.

To select other images, just duplicate this line
<a href="#" onclick="ChangePic('trevor.jpg');return false">Trevor</a>
and change the name of the jpeg file (in this example 'trevor.jpg') to, say,
'anotherimage.jpg'.

The code can be altered to load text but this is a little bit more complex.

<html>
<head>
<script type="text/javascript">
function ChangePic(picname)
{ document.getElementById("myImage").src= '../../myweb/images/display/' +
picname }
</script>
</head>
<body>
<p>
<a href="#" onclick="ChangePic('trevor.jpg');return false">Trevor</a>
<a href="#" onclick="ChangePic('carole.jpg');return false">Carole</a><br
/>
<img src="../../myweb/images/display/trevor.jpg" id="myImage" />
</p>
</body>
</html>

--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
----------------------------------------