top.gif (222 bytes)
Step by Step: how to use JSMOC

Take some time and design your site's hierarchy (navigation), it's look (interface), and content. First write them down on a paper, and when you're ready and after you've finished the graphics for the buttons, work with JSMOC.

What you must already have decided before you start working with JSMOC is:

What options / selections you are going to use - this is the navigation system of your site.
What kind of mouse over effect you need to use. You need a horizontal menu, a vertical menu, do you want a second image to be shown when you are over a button, do you want a message displayed when you are over a button, where to go when user clicks on a button (the link pages - it helps if you know the filenames of the pages)
The graphics and style of your buttons, at all their stages (normal, when mouse is over, on click (optional), second image (optional).

Let's say you want to make your home page and you'd like to have some cool graphic navigation menu at the left of your non-framed site.

Options - selections (navigation menu)

For our example we need the following buttons:
1. Home
2. Design
3. Coding
4. Contact

What we really need

We want a horizontal menu, with all the buttons and when the visitor moves over the buttons, we want to display another image and a status bar message.

The Graphics

If you don't know how to use image processing programs or you don't have installed any related software at your PC, you can always use Windows PaintBrush or search for ready made pictures/icons/images/clipart from the web.
Here are some usefull links to start: altavista,, animation Central, Andy Graphics, Animation Factory, Prodraw button gallery and many more...
My best pre-made button can be found at: Pankpages, Freeweb Templates,
You can use Buttonz and tilez. A freeware for creating beveled buttons and seamless textures. Other titles like this, are: Border Mania, Harmwave, Just Buttons
There are also some online tools for button creation around the web: Button maker, Flaming Text (free buttons!), 3D Web Button
(To create well designed graphics and cool navigation menus, you can always use some professional programs like: Photoshop or Paint Shop Pro. Here you can read some tutorials, how to create rollover menu bars, another one at adobe, and a jasc tutorial for Paintshop)

Let's go:


Mouse Over














Step 1

I created some buttons with Photoshop. One for every stage and then
added the text to the buttons for Normal and MouseOver state.)







Step 2

I found some cool graphics for the second highlited image, sized them and put them in circles with shadow effect.


Step 3

I placed all the graphics in the same folder (example1). Now we can run JSMOC. Double click at the "Normal Button" field (or click browse) and then select the btn-home-normal.gif inside your images folder. Double click the "Mouse Over" field and select btn-home-over.gif, double click on "on click" and select btn-home-clicked.gif and on "Highlight Image" browse or type btn-home-highl.gif
Type at the "Link to" field (if you want to link to a saved file, double click the "Link to" and select your file, or type it's name at the field). Select hlp-bg.gif for BG Image (background) and type "Home - :: code ::" to "Status Bar text".
Hit the to add a new button. (with you can always delete it later). Click on to change first button's name to "Home" (or double click "New button" in the list) and the new one to "Design". Again, double click at "Normal Button" field, select btn-design-normal.gif, at Mouse Over select btn-design-over.gif, click=btn-design-clicked.gif, highlited=btn-design-highl.gif, Link to=, Status bar=Web design. Click the add again: name the new button "Coding" and for Normal Button=btn-coding-normal.gif, Mouse Over=btn-coding-over.gif, click=btn-coding-click.gif, highlited=btn-coding-highl.gif, Link to=, Status bar=Web Authoring - Programming. Add the final button, name it:"Contact" and for Normal Button=btn-contact-normal.gif, Mouse Over=btn-contact-over.gif, click=btn-design-clicked.gif, highlited=btn-contact-highl.gif, Link (if you want to create a link for sending mail, type and you're ready), Status bar=Email. Now save your site's scheme, click type "code_gr" and press enter. Now if you want to change anything from your selection in the future, you can use the to open the code_gr.jsm scheme and make your changes. It's time to test it live with your default browser by pressing . What do you think? Are you satisfied with the result, now you can create the final file by clicking . And don't forget you can always use the for help.

In JSMOC 2.0 folder you can find two folders named "example1" and "example2". You can download their scheme files and check them out. Click on the hyperlinks to see them on line.

TIP 1:
If you want to add sound to your mouse over's, you might get some ideas from here!
TIP 2: Don't forget! You can also have animated gifs at any button stage!
TIP 3: If you want to sent email when the user click on one of your buttons, then you must type at the Link to field.
TIP 4: If you have your images in a folder (different from the HTML files), then you must type imagedir/yourimage.gif at the images fields and then click the "write code" button.
TIP 5: For anchors type #anchor at the link to field
TIP 6: It's recommended to build the Navigation menu with JSMOC first and then add the content to your pages. You can create the final index.htm page with JSMOC and then rename it, copy or use it like a template file. Use DreamWeaver (it also has a built in "rollover images" effect) or a simple text editor (for advanced users) to add the content.
NOTICE: If you use Frontpage or another HTML editor that changes the code, then the JavaScript MouseOVer Effect may not working properly.

Design by Hosted by ANETA (© 2000)
bottom.gif (221 bytes)