Web Studio Site

Main Menu

Graphics

Web Studio Forums

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

Simple plus a Border

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

This is the same code as that used in Step 1. 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.

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

If you are following these proceedures in a trial situation with your own image, and merely want to alter the style a bit for the same page, you don't have to alter the link to the image as described in step 1. All we are going to do here is add a border around that image. If you set up your first page as in Step 1 and wanted to keep that style for that page, you would have to create a new page with a different set of styles to duplicate this example. You can't have multiple styles on one page.

Changing the Pop-Up Display. (Style)

Let's now add a 4 px wide border around the image shown in the previous example.

Here you will alter the code in the HTML Object that you put on the page in Step 1.

You can see that the image background color is "lightyellow, the border is 0 px and the border color is solid #000 (black)
All I did was change the border to 4. You can change the border color to whatever you want. 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