Main Menu
©
2007 WebStudioHelp.net & SunsetFX.com All Rights Reserved Worldwide
No images, graphics or text on this site may be reproduced without the written permission of WebStudioHelp.net
'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.
Graphics
Introduction to Loren's Layered Thumbnail / Pop-Ups Tutorial * All credit for developing this in-depth tutorial goes to Loren - Great Job! *
Layered Pop-Ups: Another Method of Thumbnail Design and Layout.
This is a Pop-Up function developed by Dynamic Web Coding: http://www.dyn-web.com/dhtml/write-drag/documentation.html
I have, however, altered the code to enable it to do both Centering and x/y offsets on the same page. The way it was designed, you could do one but not the other on a single page.
Although Dynamic Web has done what I consider a great job in developing this function, I found it very difficult to implement in Web Studio. Therefore, I took it upon myself to provide you with this tutorial. I hope you find it easy enough to follow and implement in your design.
I personally feel this function has a place in WS design. This function uses layers to bring up your thumbnail pop-up rather than the normal Windows pop-up that we see all the time. There are many advantages to the use of this function, some of which follow:
- You, as the developer will not be constrained to the limitations of the normal windows Pop-up.
- No need to ever close orphan windows.
- Your pop-up can be as simple as an image Pop-up with no border or header.
- Your pop-up image can have a header bar and close box,
- You can set your own border style and width.
- You can set your own background color.
- Auto Centering.
- You can add text to the bottom of your image.
- Relative positioning.
- and quite a few more options.
The list of options is quite extensive. Just take a browse through the Dynamic Web Coding site at the above URL to see some of the results. You can also take a look at some of the examples used in this sites layout.
Another feature of this is that if you use text with an image, the Search Engines will be able to read it because the text is written HTML on your page.
The tutorial pages outline the methods that you will use in setting this function up. I have made the coding as simple as possible for novice Web Studio users. More advanced users may want to change a few things such as having their .js files in one location on their host. That's up to them.
Follow the tutorials with the links above.