The problem with schemes like this is as follows. Let's assume that you
want to comply with the general target weight of a webpage of 40-45K (in
this case, we'll relax that target to 70K, since this is likely an
internal page in your site). Let's also assume that your page itself
contains 8K of code, and that your thumbnail images are each 4K. So -
if you have 8K of code and 4x10K = 40K of images, you are already at 48K
of weight, and you have not yet added the heaviest component to your
page (the larger images and their associated text!). I am guessing that
your larger images are no less than 15-20K each, so 10 of those would
add 150-200K to the page. Ugh. At 250K, the whole page will take ~60
seconds to download. If you feel you can accommodate such a download,
then the way to do the page is as follows -
1. Place your thumbnails on the page in the desired location.
2. Place a layer on the page [1], in the location where you want the
larger images to appear. Insert the first image in this layer, and its
associated content beneath (you will have to add a table to the layer,
or use CSS to position the image and the text as you wish within this
layer).
3. Now, set the visibility of this layer to "hidden" (use the
Properties of the div tag and, in FP2003, click under the "eye" icon to
change the layer's visibility).
4. Select the associated thumbnail, and apply a Change Property
behavior to it, changing that layer's visibility from hidden to visible.
Most likely you will want this to be triggered by an onMouseOver event.
Then apply the same behavior again, to change the visibility from
visible to hidden onMouseOut. The net effect is that when you mouse
over the thumbnail, the larger image will appear, and when you mouse off
the thumbnail, it will disappear.
5. Now all you have to do is to repeat steps 2-4 for as many thumbnail
images as you have and you are done.
You have built a slideshow, but the page is quite heavy. It contains
all of your thumbnail images, as well as all of your larger images and
their associated captions. Each of these larger image/caption pairs is
contained in a separate (hidden) layer, that is only revealed on the
page when you mouse over the associated thumbnail,
If you are concerned about this page's "weight", then there is a way to
avoid this extra weight yet to achieve exactly the same effect. This is
not so hard to do with FP's Set Text of Layer behavior (FP2003 - I don't
know about earlier versions), but it will require some manual assistance
to accomplish.
This alternate method will require you to create a *dummy* page, and
copy code from that dummy page into the real page (unless you are good
at manually writing HTML, that is). So, here's the method -
1. Follow steps 1 and 2 above. Now put this page aside, and create a
new page.
2. On this new page, insert your image, and its associated caption in
whatever HTML/CSS structure you need to use to position everything
properly when it is inserted into the page made in step 1.
3. Go to code view, copy ONLY the code between <body> and </body> to
the clipboard.
4. Return to the page in step 1, select a thumb, and apply a SET TEXT
OF LAYER behavior to this thumb, and select the SINGLE layer on this
page.
5. In the dialog that follows, click in the New HTML field and PASTE
the contents of the clipboard there. Click OK, and make sure that the
event is onMouseOver.
6. Again apply the SET TEXT OF LAYER behavior, enter a space in the New
HTML field (i.e., the text in the layer will be set to a simple space),
click OK, and make the event onMouseOut.
7. Return to the dummy page, and change the image and its associated
caption to the next one by replacing the image, and entering the new
caption.
8. Repeat steps 3 - 7 in this list until you are done with the images.
Note that this page will contain all of your thumbnails, and only a
single hidden layer. That hidden layer, when the page is fetched from
the browser contains *nothing*, i.e., it is empty. Thus the weight of
the page is only that contributed by the code and the thumbnails.
You have built a new kind of slideshow, now. When you mouse over any
given thumbnail, the contents (i.e., the HTML markup) in that single
layer is "dynamically" changed (by the set text of layer javascript) to
contain a link to the image and the associated caption, which then
magically appears on the page. When you mouse off the thumb, the HTML
content of the single layer is changed to a simple space, and the
image/caption disappears. Mousing over the next thumbnail repeats the
process.
Thus the page is light-weight, even though your larger image/caption
pairs may be quite heavy.
To see a demonstration (albeit one written and built in Dreamweaver -
although the concepts and operation are exactly the same), go here -
http://dreamweaverresources.com/tutorials/settextoflayer.htm
[1] ALERT! When you use layers on a page built with tables, you must be
aware of and cautious about two things:
a) you must not place the layer *IN* the table. You can tell you have
done this in a number of ways, but the easiest is to select the layer,
and then to look at the tag selector region of the status bar at the top
of FP2003's document window - if you see something like this - <table>
<td> <div> - then you are IN the table. Alternatively, you can look at
the code for the page - if you see a <td> tag before the layer's <div>
tag, then you have placed the layer into the table. The solution would
be to CUT that layer's code completely from the page, and paste it back
immediately above </body>.
b) since layers are absolutely positioned, they will stick to the screen
like glue at their required coordinates. If you have used percent width
tables, or tables that are center aligned, the tables will move on the
page while the layer stands still - causing the layer's contents to
appear to shift left. If you see this happening then the reason is
exactly what I have mentioned here. There are ways to make the layers
move with the tables, but that is well beyond this post's scope. If you
are having the problem your only solution for now would be to make the
table a fixed pixel width, and left aligned.
<whew>
Did I lose you?
--
Murray
============
I haven't been able to figure this out for over a week now!
I want to have a list 5 or 10 of products that when either clicked on
or moused over would bring up a photo and a text description of the
product from that list.
I found this example on the Web:
http://www.eleanorstravels.com/PreysFruit/index.htm
The only difference is that when the small photo is moused over (or
clicked on) I want to have a text description appear along with the
large image in the center. Is that possible using 2003 by somehow using
Layers & Behaviors.
THANK YOU!
Thanks a