Main Menu

© 2007 &          All Rights Reserved Worldwide     
No images, graphics or text on this site may be reproduced without the written permission of
'Back to the Beach',  'Web Studio' and all content accessed through the Web Studio Forums are Copyright Back to the Beach Software and Web Studio.
Examples listed are with permission.


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.

** Note **
Be sure to follow the steps outlined on the Basics Page to prepare for the following.


          <table border="0" CELLPADDING="0" CELLSPACING="0" align="left">

<div id="dragDiv" style="position:absolute; visibility:hidden; left:0; top:0; z-index:1000; background-color:lightyellow; border:0px solid #000;">

<div id="cntnt" style="padding:0px"></div>

<div id="dragDiv" style="position:absolute; visibility:hidden; left:0; top:0; z-index:1000; background-color:lightyellow; border:4px solid #000;">