Picture Popups
Your visitor clicks on a link or thumbnail and up pops a picture. When your
visitor clicks on another link or does something else, the popup disappears
automatically.
Unlike the Info Mouseover method (see The Demo Index Page),
you do not need a separate HTML webpage for each picture.
You specify the picture URL, height, and width right in the link. Optionally, you can
also specify a background color, title text, and text color. (The URL can be a relative
URL or a full http://... URL.)
Here are some examples with various optional data in the link:
Image URL is images/atriver.jpg
Image height is 290 and width is 215 |
| Text Link |
Title: On the shores of the Index River
Background Color: Blue
Text Color: White |
 |
Title: Getting some air on the banks of the Index River near the outskirts of the town of Index, Washington state, United States, several miles from Index Mountain.
Background Color: Red
Text Color: White |
| Text Link |
No title specified
No background color specified
No text color specified
| Note: | When
no colors are specified, the browser's
defaults are used. |
|
Only one JavaScript function is required. It calculates the size of the popup box from
your specification of image size. The function automatically adjusts the popup box size
depending on how large the title is.
The entire popup box is constructed in that one function. The
only outside file required is the picture itself.
To see an example with a different size image,
click here.
The function is almost thirty lines, with several lines extending over 100 characters.
Therefore, it is available in a separate page with preformatted text which you
can save onto your hard drive. You access that page by
clicking here. It includes complete instructions.
The function and instructions page is designed
so you can easily copy and paste the function into your own pages.
| NOTE: | If you want to see the source code of this page, know
that some browsers (several versions of Netscape, for example) will
not show you the actual original source code as stored on the server.
Rather, they will show you the code which displays the page you are
viewing. The original and the generated can be quite different at
times. If you think your browser might be doing this to you, then
use the Master Snooper at
/master/snooper/
to see what the source code really looks like. |
Will Bontrager
©1999 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
)
){kind=link}
){kind=link}
){kind=link}