Description:
Our second tutorial in design integration will take another step in the direction of complexity in making your ubb look more a part of your site.

Purpose:
One of the basic techniques in making a website more "interactive" is through the use of roll-overs. Some are very simple, as in the case of text hovers that can be used for IE browsers. Graphical rollovers can be viewed in most browsers, if done correctly, and are thusly very popular to use. They can give your site quite a bit more visual "punch"... again, if done correctly.

I haven't seen this done on other boards, and thought, until now, that it was because it couldn't be done with cgi files. I didn't think javascript and cgi mixed could be found together in the wild. I have here, for your perusal, an example of a real-life ubb with javascript graphical rollovers. Demo. Be quiet while you look around folks, you just don't find them together like this normally in the wild.

ssssshhhhhhh!!!! it's a big one, mate! jes look at the size of those teeth!

How To:
I have expanded here on our basic design tutorial by including these rollover effects for you to view source on and download. These rollovers were accomplished working with our basic table layout in the cp. Using the right nav demo as a backdrop, I placed the script for the rollovers in the section of general settings about 1/3 the way down called (oddly enough) "Header Insert". I used javascript provided by Macromedia's Fireworks program (an excellent program for web developers). The part of the rollover placed in the body went into the footer section in our general settings for use in our right navigation example. If you'll view source, I placed the provided coding from Fireworks inside another table to make it stay in the right navigational area. View source, copy it all you want, break it apart and show us better ways of doing it. This is just the beginning...

Examples:
These examples (and the accompanying code) provide a very basic idea of how to do this. You are free to adapt this to your needs by adding/ subtracting links, graphics, other html coding, etc.

Right Navigation Bar:
This one I haven't seen at any other site, but I am thinking about putting it here and removing the frames for the site to improve search engine placement. This moves the navigation bar to the right side of the ubb and is accomplished by putting the code for the nav bar in the footer this time, instead of the header. You can download an example file here .

Note:
You must be sure and use base paths, or absolute urls (not relative urls) when linking to your images, as the cgi files are in different directories from your html files, in which each forum is in its own directory structure. I used "/images/graphic.gif" in my cp code so that the images would all be pulled from the images directory at the root of the website.

You can use the source coding and table layout all you want, please don't use my graphics, tho. Thank you...

I hope this has helped you in some way to get a start on design integration. As I said in the beginning, this is a very basic tutorial which will get better as the material continues to evolve. Good luck and ask any questions you may have in the " design integration " forum.

------------------
Allen

- http://www.stand318.com