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.

Web Studio Site

Main Menu

Graphics

Web Studio Forums

Loren's Layered Thumbnail / Pop-Ups Tutorial / Header Bar and Close Box                 * All credit for developing this in-depth tutorial goes to Loren - Great Job! *

Pop-up with Header Bar and Close Box

The Whole 9 Yards: By following the instructions below, you will create a more complex Pop-Up with an image, Border, Background, Header and Close Box. A couple of examples show Text.

           The following code differs from previous steps.
           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.
           Remember to adjust the $this_folder_url$  settings as per the Basics page.

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

Changing the Pop-Up Display, Adding a Header and Close Box. (Style)

Your HTML Object  will have to be altered as per the above script.

The above code sets a handle at the top of the image or text box, and adds a "X" box to the upper right hand corner of the Pop-up. Background color is silver, if you attached files as directed earlier (in the 'Basics' section), your bx.gif will be found. Set an "X" box border. In the above code, it's 2 px. In the examples there is no "X" box border.

That's all I have done here! Although all of the examples will appear differently than in Step 3, they are the same except for these very minor changes.

A reason for adding a Header Bar and Close box may be simply that an individual viewing your site may not clue into the fact that all you have to do to close a window is to click outside of it. This may make it easier for them to follow.

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.

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.

Site Map