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.

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 / 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.

You can simply copy all of the above code and replace your existing Object code, which will require going through steps 1 to 3 again, or you can copy just the following and paste it into the object. Paste it into the same position as shown in the above code.

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.



          <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:2px solid #000;">
  <div id="handle" style="background-color:silver; text-align:right; font-size:12px;">  <a href="javascript: void writeDrag.hide()"><img class="xBox" src="$this_folder_url$bx.gif" width="12" height="12" alt="close box" border="2"> </a>  </div>

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

<a href="$this_folder_url$clear.gif"  onclick="return wrapContent(event,this.href,0,0,'This is an example of using this function for tooltip text. The tooltip is 200 px wide, positioned 20 px left of the mouse click and 20 px below',200,-20,20)">