Web Studio Site

Main Menu

Graphics

Web Studio Forums

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

Simple plus Border plus Background

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

This is the same code as that used in Step 1 (Simple) and Step 2 (Border). 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, just adding to Step 2. (Style)

We will now add a yellow background between the image and the black border.

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

All we want to do here is add some light yellow padding between the image and the border. All I had to do was change the padding in the above line from 0 to 6, the background color is already "lightyellow". Click on the image below 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.

Next we will create a clickable "Tooltip" with a 4 px border and light yellow background.

Because WS will not accept the link by the use of "Add or Edit Link" you cannot create a text link. What I have done instead is put my text on the screen, formatted the link word to look like a regular link, then drag a "Sign" onto the page, size it accoringly, make it transparent, and place it over the text that I am using as a link. I then added the link to the (sign) gif image.

For this example I put the following code in the HTML of the Object (image that we are linking from). Select Before the Object

I changed the width and height both to 0, put the text between the 2 quote marks, changed the word "null" to 200 which sets the width of the tooltip, set the left offset to -20 (20 px left of the mouse click) and the top offset to 20 (20 px below the mouse click). Click on the text example below for a demonstration.

You can also have tooltip text only, as in this example . If this object is too close to the bottom, left or right of the screen, the tooltip text will position itself so that it doesn't go outside the screen area.

Place this code After the Object

Next we will create a mouseover "Tooltip" with a 4 px border and light yellow background.

In the second example for mouse over I used the same code but changed "onclick" to "onmouseover", and positioned the left offset to -40 and the top offset to -20. This was done so that the viewer can't click on the link. This function was not designed to handle "mouseover" but with a little imagination, it can be done.  Mouseover the text example below for a demonstration.

You can also have tooltip text (onmouseover) as in this example . If this object is too close to the bottom, left or right of the screen, the tooltip text will position itself so that it doesn't go outside the screen area. The problem with mousover is that if you click on the word "example", as in this demo page you would open an new blank window. So in this case I positioned the text over the word to prevent the viewer from clicking on the word.

Site Map