2007 WebStudioHelp.net & SunsetFX.com All Rights Reserved Worldwide
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.
The following Code goes into an HTML object:
You are now set up to start using the Pop-Up function.
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.
** Note **
Be sure to follow the steps outlined on the Basics Page to prepare for the following.
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.