Roller Help

back | multi image swapping | make code | legalese

Before you start....
Please read the directions thoroughly! They were written to be as simple as possible, and you should be able to generate good code if Roller is used properly. Please also read the updated copyright page for terms of usage.

Basic usage
Using Roller is pretty simple. Enter the information you want to acheive the various effects for each button. Just follow these simple steps to generate good clean rollover code:

Step I
Type in the relative or absolute path and filename of the image you'll be using as the "off" image. Do note that in order to preview your page properly, you'll need to enter the ABSOLUTE PATH of the images. Read the description on the image path below for an example.

If you forget to enter the info for the "off" button, then Roller will insert "OFF IMAGE NOT SPECIFIED" in place of the image and it won't write the code for the mouseover. This will keep javascript errors from popping up.

Step II
Type in the relative path and filename of the image you'll be using as the "on" image, or the image that will be displayed when you move themouse over the button. If you forget to insert the info for the "on" image, then Roller won't add the image swap code to the anchor tag. This is for error protection.

Step III
Add the URL or link you want to target with the button in the "URL Link" box. This is where you'll go when you click the button. If you want the target to pop up in a different frame, a new window, or the parent window, enter that in the "Special Target Location?" box. To target windows, use this table to find the text you should enter:

Target Description Target text
blank or new window opens a new window with your link in it. _blank or _new
parent window in framed pages, you use this link to open a page in the main browser (kinda like breaking out of frames). _parent
frame in framed pages, you can specify which frame you want to target use the name of the frame
anchor tag in page takes you to a special location in a page. #link (link being the name of the anchor in the page).

Step IV
Press the "Process Info/Next" button. This will assign the values you just entered to the variables Roller uses to process your code. Nothing will show up in the output window - that's ok, Roller is really working. If you generate code without processing the info, then the values won't get assigned and Roller will generate empty code. Roller is now ready to take informatin for the next image. In a single session, you can generate as many mouseover buttons as you want - just repeat step I - IV for EACH image.

Step V
If you're done, or you just want to see how the code is progressing, click "Generate Code!" and *POOF* you have some nifty JavaScript! If you made a mistake in a pathname somewhere, you don't need to start over. You can edit the text in the results box before you cut and paste.

Now just copy all the code from the top output box and paste it inbetween the <head> and </head> tags of your html page. Next, copy the contents of the bottom output box and paste it anywhere between the <body> and </body> tags of your html page.

Note: You don't need to click "Generate Code!" every time you enter a button - you'll only use it if you're completely done and ready to get the code or if you just want to preview the code that's been generated so far.

Previewing your work
Ok, you're all finished, but you wanna see what everything will look like right? You can click the Preview button to get a look at how your mouseovers look. Don't save the source from this window - it's just preview code. You'll want to copy the code from the output boxes.

When you're done previewing, just click the "CLOSE" button.

Extras
Ok, that was four steps to simple rollover buttons. If you'd like to add a "clicked" button, maybe some sound or flip another image while you're at it, then just fill in the applicable fields for each button, then process the info.

top

"Off" button image path
This is where you enter the path and file name of the button the you'll see when you load the page. The path must be relative or absolute to the page that's showing the image.

Relative Path:
If the html will be in your "webdocs" directory and the button "home_off.jpg" is in a directory called "images", under "webdocs", then the path that you would enter is "images/home_off.jpg" - minus the quotes, of course.

Absolute Path:
This is the exact URL of the images you're useing for mouseovers. Let's say you have image1 at http://mydomain.com/image/image1.gif, ten that's exactly what you put in. It just couldn't get any easier than that!

For more examples, just look at any html that you currently have, or somebody else's source to see how images are sourced.

"On" button image path
Well, this is almost exactly like the "off" image path, but you'll enter in the name of the image that will display when you move the mouse cursor over the "off" image. Again, the path is relative.

Status Bar Message
If you have something special to say about your link, enter a phrase! The result is that the message will get displayed in the status bar of your browser.

Note: there are some characters which are reserved for JavaScript. these characters have to be preceeded by a "\" or you'll get script errors. Here's a list of the characters and how to input them in the status message box:

Character Input like
" \"
' \'
; \;
@ \@

top

URL Link
The is the link you'll follow when you click the button. It can be you everyday "http://yourdomain.com" or a "mailto:" or an anchor to another part of the page. If you want to target different frames through the link, you'll have to add that yourself.

"Down" button image path
Again, just like the image tag...


Swapping multiple images from one mouseover
So you wanna flip more than image on a mouseover, huh? Well, Roller does it! When you're filling in the text boxes, jut fill in the alternate image boxes.

First, you'll need to fill in the Main Alternate "Off" Image box. This is the image that will be displayed when you don't move the mouse over one of the buttons, or if you move the mouse off a button. You'll only need to enter this once - Roller takes care of it from there on out. If you delete the entry from the box, Roller won't generate the alternate image code.

From there, enter in each alternate image that will display when you mouse over the button that you're inputing at the time.