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.
2007 WebStudioHelp.net & SunsetFX.com All Rights Reserved Worldwide
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.
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.
The following Code goes into an HTML object:
You are now set up to start using the Pop-Up function.
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.