Web Studio Site

Main Menu

Graphics

Web Studio Forums

Loren's Layered Thumbnail / Pop-Ups Tutorial / Simple Version                                  * All credit for developing this in-depth tutorial goes to Loren - Great Job! *

Simple - Just an Image

Simple: By following the instructions below, you will create a very basic Pop-Up of just an image. No Border, Background or Text.

This is the code for the first example that will be demonstrated. Depending on your requirements, this code may change from one example to the next. I will be demonstrating some examples of the changes that will be required to do certain things.

           The top 4 lines in the code shown in red have been added so that the code functions with the centering code in Web Studio. 
           Leave the top 4 lines in the code for Centered Pages and remove for Left Justified Pages.

The following Code goes into an HTML object:

           Always bring to front!
           Use Build this HTML Object without any additional tags when saving.

Right click on this HTML Object > Attach Files

Navigate to the .js files you saved (from the Basics page) and add them to the list.
Navigate to the images that you downloaded and add them to the list (look in the images folder). The files needed are called bx.gif and clear.gif

You are now set up to start using the Pop-Up function.

Let's start with the cleanest Pop-Up possible. No Header (handle), no text, no border.

Adding a Link!

Right click on the object that you have placed on your page and want to link from.
Properties >
Object HTML Tab >
Before the Object >
Insert code similar to the following:

Where:
-  yourimagename is the name of your image with the proper extension (like .jpg)
-  500 is the width of my image and 374 is the height (set these to the width and height of your image)
-  null stays there
-  the first 111111 is for horizontal centering and the second 111111 is for vertical centering (for centering there must be 6 - 1's in the code).
The null value will be used in a later example where you create a pop-up with no image and have to specify a width.

Now click on the radio button for After the Object and enter the following:

Right Click on the HTML Object that you added to the page > Attach Files > Navigate to the image that you want to pop-up when you click on the link, and add it to the list. This will be where you add all of your Pop-Up images!

What I have set up in my example is a pop-up image 500 x 374 centered horizontally and vertically. Click on the following image for a demonstration. 

All Pop-up images can be closed simply by clicking outside the image.

All Pop-up images can be moved simply by clicking on the image and dragging.

Site Map